按钮无法显示移动菜单

我刚刚开始学习J-Query，我正在尝试在我的网页中实现一个简单的点击事件，即当您单击按钮时它将打开移动导航。按钮无法显示移动菜单

这个按钮的作品，当我选择头，例如它会隐藏标题，但不会显示移动导航？

p.s我正在复制DICE主页只是为了学习目的，因为我知道我使用的是受版权保护的媒体;）。

我认为这可能是因为我将手机导航隐藏在我的CSS中，因此J-query无法显示。

@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>

希望有人可以给我一些洞察到这一问题。

来源

2015-12-14 Tom Noble

尽量避免在此上下文中设置显示/隐藏。使用toggleClass和css使可见或隐藏你的菜单 –

我曾尝试使用j查询来更改CSS显示：块，但它没有工作。我将不得不考虑toggleClass，因为我非常青睐J查询:) –

尝试以下操作：

$(".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>

虽然使用toggleClass将更加有用。

\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>

来源

2015-12-14 18:44:25

对不起，这是我原来的尝试，在mobile-nav之外的仍然不起作用。感谢您的回复 –

我编辑了答案。现在检查。 –

无法在我的代码中使用任何一个示例来工作我甚至粘贴了示例并且它仍然不起作用？同样对于toggleclass，我也需要链接那个。打开到我的html中的任何东西？如果我选择任何其他元素，按钮的作品？ –

的（据我所知），用于动画移动导航解决方案最简单的：

$(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>

，只要你想它很明显的风格;）

来源

2016-07-01 21:43:26

按钮无法显示移动菜单

回答

相关问题