Question

我正在制作一个简单的导航菜单。我想让这个响应。当我重新调整窗口大小小于480像素时，媒体查询工作，但菜单触发器没有切换。在移动视图中，我只想显示导航菜单，而不是选项。当有人点击它时，它应该切换。我的代码在CodePen中：http://codepen.io/parakhharsh/pen/NqRxdE？

Html代码：

<html>
<head>
  <title>OpenMoz</title>
  <meta charset="utf-8">
  <meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href=""/>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

  <!-- Latest compiled and minified JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>   
  </head>
  <body>    
  <span class="menu-trigger">Menu</span>    
    <nav class="navbar navbar-default"> 
    <!--    <div class="nav-menu">  -->
          <ul class="nav navbar-nav">
            <li style="margin-left:15px;"><a href="home.php" class="ui-btn-active" data-icon="home">Home</a></li>
            <li style="margin-left:15px;"><a href="about.php" data-icon="home">About</a></li>
            <li style="margin-left:15px;"><a href="contact.php" data-icon="home">Contact</a></li>
          </ul>
      <!--  </div>  -->
    </nav>
</body>
</html>

CSS代码：

.menu-trigger
 {
    display: none;
 }

 @media screen and (max-width: 480px)
 {
    .menu-trigger
    {
      display: block;
      color: #305782;
      background-color: #d5dce4;
      padding:10px;
      text-align: left;
      font-size: 83%;
      cursor: pointer;
    }
    nav.nav-expanded
    {
      display: block;
    }
    nav.navbar navbar-default
    {
      display: none;
    }
    nav.navbar navbar-default ul li
    {
      float: none;
      border-bottom: 2px solid #d5dce4;
    } 
    nav.navbar navbar-default ul li:last-child
    {
      border-bottom:none;
    }
 }

Javascript代码：

jQuery(document).ready(function() {
      jQuery(".menu-trigger").click(function() {
        jQuery(".navbar navbar-default").slideToggle();
      });
});

非常感谢你的帮助。

Answer 1

您在JS .navbar和.navbar-default之间错过了一段时间。

jQuery(document).ready(function() {
  jQuery(".menu-trigger").click(function() {
    jQuery(".navbar.navbar-default").slideToggle();
  });
});

Answer 2

只需将nav.navbar navbar-default更改为nav.navbar.navbar-default无处不在......就像分配给nav元素的多个类一样。

响应式导航菜单：切换不起作用

2 个答案: