Przycisk nie działa, aby pokazać menu telefonu komórkowego

Właśnie zacząłem się uczyć J-Query i próbuję zaimplementować proste zdarzenie click na stronie internetowej, która jest po kliknięciu przycisku otworzy się mobilna nawigacja.Przycisk nie działa, aby pokazać menu telefonu komórkowego

Ten przycisk działa po wybraniu nagłówka, na przykład ukryje nagłówek, ale nie wyświetli telefonu komórkowego?

p.s Kopiuję stronę główną DICE tylko do celów edukacyjnych, ponieważ wiem, że używam nośników chronionych prawem autorskim;).

Myślę, że może to być związane z tym, że ukrywam mobilną nawigację w moim CSS, więc J-query nie można/go wyświetlić.

@media screen and (max-width: 1024px) { 
 
    nav{ 
 
    justify-content: space-around;  
 
    } 
 
    
 
    .bars{ 
 
    display:block; 
 
    width: 50px; 
 
    height: 100px; 
 
    cursor: pointer; 
 
    } 
 
    
 
    
 
    ul{ 
 
    display: none !important;  
 
    } 
 
    
 
    
 
    .mobile-nav{ 
 
    display: none; 
 
    position:absolute; 
 
    z-index: 3; 
 
    left:-110px; 
 
    top:70px; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0.8; 
 
    background-color:black; 
 
    } 
 
    
 
    .mobile-nav li{ 
 
    height: 50px;  
 
    } 
 
    
 
    .mobile-nav a{ 
 
    font-size: 2rem; 
 
    font-weight: 700; 
 
    } 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 
    
 
    <title>Dice</title> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    
 
    <link rel="stylesheet" href="style.css"> 
 
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> 
 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    
 
    <script> 
 
    $(function(){ 
 
     
 
    $('.bars').on('click',function(){ 
 
     $('.mobile-nav').show(); 
 
    });      
 
         
 
         
 
    
 
         
 
         
 
    }); //End of code?// 
 
    
 
    
 
    </script> 
 
</head> 
 
<body> 
 
<header> 
 
    <nav> 
 
    <img src="dice-logotype-black.png"> 
 
    <button class="bars"> 
 
    <ul class="mobile-nav"> 
 
    <li><a href="#">ABOUT</a></li>  
 
    <li><a href="#">GAMES</a></li>  
 
    <li><a href="#">JOBS</a></li>  
 
    <li><a href="#">NEWS</a></li> 
 
    <li><a href="#">STORE</a></li>  
 
    </ul> 
 
    </button>  
 
    <ul> 
 
    <li><a href="#">ABOUT</a></li>  
 
    <li><a href="#">GAMES</a></li>  
 
    <li><a href="#">JOBS</a></li>  
 
    <li><a href="#">NEWS</a></li> 
 
    <li><a href="#">STORE</a></li>  
 
    </ul></nav> 
 
    </header> 
 
<div class="global-container">  
 
    <div class="video"><video src="dicemovie3-1.mp4" autoplay loop></video> 
 
<div class="text"><h1>We share the passion to create something extraordinary.</h1> 
 
<button>DISCOVER OUR CULTURE</button><button id="button-2">READ ABOUT OUR GAMES</button>  
 
     </div> 
 
    </div>  
 
</div> 
 
<div class="square-images"> 
 
<div class="square-1"></div>  
 
<div class="square-2"></div> 
 
<div class="square-3"></div>  
 
</div> 
 
<div class="about-dice-wrapper"><div><h2>MORE THAN COMPUTER SCREENS</h2> 
 
<p>DICE is the award-winning developer of the Battlefield franchise and games like Mirror’s Edge. 
 
We are situated in the world’s most picturesque cities, Stockholm, 
 
Sweden and in the vibrant city of Los Angeles, USA.</p> 
 
<button>About Dice</button></div></div>  
 
<div class="tweet-wrapper"><div> 
 
<img src="tweet.jpg-thumb"> 
 
<p>Meet DICE today! Head to Stockholm's Nationalmuseum at 18:00 & learn about character design: https://t.co/WGUbkFNjay https://t.co/0SrHr38HiH<br> @EA_DICE</p>  
 
    
 
    </div> 
 
    </div>  
 
</body> 
 
</html>

Mam nadzieję, że ktoś może mi dać pewien wgląd w tej kwestii.

Źródło

2015-12-14 Tom Noble

staraj się unikać ustawiania widoku/ukrywania w tym kontekście. Użyj toggleClass i css uczynić widocznym lub ukrytym twoje menu. –

Próbowałem użyć zapytania J, aby zmienić css na display: block, ale to nie zadziałało. Będę musiał spojrzeć na toggleClass, ponieważ jestem bardzo zielony z J-zapytaniem :) –

Spróbuj wykonać następujące czynności:

$(".bars").click(function() { 
 
\t $(".mobile-nav").show(); 
 
});

.mobile-nav { 
 
    display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="bars">Click me</button> 
 

 
    <ul class="mobile-nav"> 
 
    <li><a href="#">ABOUT</a></li>  
 
    <li><a href="#">GAMES</a></li>  
 
    <li><a href="#">JOBS</a></li>  
 
    <li><a href="#">NEWS</a></li> 
 
    <li><a href="#">STORE</a></li>  
 
    </ul>

Chociaż użycie toggleClass będzie bardziej użyteczne.

\t $(".bars").click(function(event) { 
 
\t \t $(".mobile-nav").toggleClass('opened'); 
 
\t });

.mobile-nav { 
 
    display: none; 
 
} 
 

 
.opened { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="bars">Click to toggle</button> 
 

 
<ul class="mobile-nav"> 
 
    <li>Blabla</li> 
 
    <li>Blabla</li> 
 
    <li>Blabla</li> 
 
</ul>

Źródło

2015-12-14 18:44:25

Niestety, to była moja oryginalna próba, która miała poza nawigacją mobilną, nadal nie działa. Dzięki za odpowiedź –

Edytowałem odpowiedź. Sprawdź to teraz. –

Czy żaden z przykładów nie działa w moim kodzie? Wkleiłem nawet przykład programu i nadal nie działa? Także dla toggleclass, więc czy muszę połączyć to wszystko z czymkolwiek w moim htmlu? Przycisk działa po wybraniu dowolnego innego elementu? –

Najprostszym (według mojej wiedzy) roztworu do animowanego mobilnej nawigacji:

$(document).ready(function(){ 
 
    $('nav').hide(); 
 
    $('.show_nav').click(function(){ 
 
    $('nav').slideToggle('slow'); 
 
    }); 
 
});

 .show_nav { 
 
     padding: 1em 1.4em; 
 
     background: #ddd; } 
 

 
     nav { 
 
     background: #111; } 
 
     nav ul { 
 
      list-style: none; 
 
      padding: 0; 
 
      margin: 0; } 
 
      nav ul li { 
 
      color: #fff; 
 
      padding: 1em 1.4em; }

<!doctype html> 
 
    <html class="no-js" lang="en"> 
 
     <head> 
 
     <meta charset="utf-8" /> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
     <title>test</title> 
 
     <link rel="stylesheet" href="css/style.css" /> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     </head> 
 
     <body> 
 
     <button class="show_nav">show nav</button> 
 
     <nav> 
 
      <ul> 
 
      <li>Hello world!</li> 
 
      <li>Hello world!</li> 
 
      <li>Hello world!</li> 
 
      <li>Hello world!</li> 
 
      <li>Hello world!</li> 
 
      <li>Hello world!</li> 
 
      <li>Hello world!</li> 
 
      </ul> 
 
     </nav> 
 

 
     </body> 
 
    </html>

Oczywiście styl jak chcesz;)

Źródło

2016-07-01 21:43:26

Przycisk nie działa, aby pokazać menu telefonu komórkowego

Odpowiedz

Powiązane problemy