个人中心
gpt4 book ai didi

jquery - 按钮无法显示移动菜单

转载 作者：太空狗 更新时间：2023-10-29 15:16:35 26 4
gpt4 key购买 nike

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

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

最佳答案

最简单(据我所知)的动画移动导航解决方案:

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

显然是你想要的样式 ;)

关于jquery - 按钮无法显示移动菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34274179/

26 4 0
文章推荐： c - Kqueue 返回 EVFILT_READ 和 EVFILT_WRITE 但我安装了单独的 (ident,filt) 对
文章推荐： Android 自定义 LinearLayout 和膨胀 xml
文章推荐： c - 在 C 中初始化字符串和数组 - 区别
文章推荐： Android ViewAnimator 和 OutOfMemoryError