Javascript 响应导航菜单：切换不工作_Javascript_Jquery_Html_Css

Javascript 响应导航菜单：切换不工作

javascript jquery html css

Javascript 响应导航菜单：切换不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在制作一个简单的导航菜单。我想让这个反应灵敏。当我重新调整窗口大小小于480 px时，媒体查询工作，但菜单触发器没有切换。在mobile view上，我只想显示导航菜单，但不想显示选项。当有人点击它时，它就会切换。我的代码在代码笔里： Html代码： <html> <head> <title>OpenMoz</title> <meta charset="utf-8"> <meta charset=utf-8>

我正在制作一个简单的导航菜单。我想让这个反应灵敏。当我重新调整窗口大小小于480 px时，媒体查询工作，但菜单触发器没有切换。在mobile view上，我只想显示导航菜单，但不想显示选项。当有人点击它时，它就会切换。我的代码在代码笔里：

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>

Javascript代码：

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

非常感谢您的帮助。

您的JS中缺少

.navbar

和

.navbar default

之间的一个句点

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

只需将

nav.navbar-navbar-default

更改为

nav.navbar.navbar-default

随处可见……就像分配给一个nav元素的多个类一样

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