文章/答案/技术大牛

发布

社区首页 >问答首页 >按钮无法显示移动菜单

问按钮无法显示移动菜单
EN

Stack Overflow用户

提问于 2015-12-15 02:35:41

回答 2查看 288关注 0票数 6

我刚刚开始学习J-Query，我正在尝试在我的网页中实现一个简单的点击事件，当你点击一个按钮时，它将打开手机导航。

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

附注:我复制骰子主页只是为了学习，因为我知道我使用的是受版权保护的媒体;)

我想这可能是因为我把手机导航藏在我的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>

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

jquery

html

css

回答 2

Stack Overflow用户

发布于 2016-07-02 05:43:27

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

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

显然是你想要的风格;)

票数 1

Stack Overflow用户

发布于 2015-12-15 02:44:26

尝试以下操作：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34274179

复制

相似问题

问按钮无法显示移动菜单
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按钮无法显示移动菜单EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按钮无法显示移动菜单
EN