Question

我刚刚开始学习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>

希望有人能给我一些关于这个问题的见解。

Answer 1

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

＆＃13;

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

＆＃13;

      .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; }

＆＃13;

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

＆＃13;

显然你想要的风格;）

Answer 2

尝试以下方法：

$(".bars").click(function() {
	$(".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会更有用。

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

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

按钮无法显示移动菜单

2 个答案: