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

【问题标题】：Responsive Navigation Menu : Toggle not working响应式导航菜单：切换不起作用
【发布时间】：2015-05-21 01:38:11
【问题描述】：

我正在制作一个简单的导航菜单。我想让这个响应。当我将窗口重新调整为小于 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();
      });
});

非常感谢您的帮助。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您的 JS 中缺少 .navbar 和 .navbar-default 之间的句点。

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

【讨论】：

【解决方案2】：

只需将您的 nav.navbar navbar-default 更改为 nav.navbar.navbar-default 在任何地方...因为它是分配给导航元素的多个类的情况。

【讨论】：