javascript - 导航菜单不会在点击时打开或关闭

标签 javascript jquery html css hamburger-menu

我一直在尝试让这个汉堡菜单工作很长时间,我已经尝试了很多次,但由于某种原因我一直在兜圈子菜单打不开(菜单打不开是个问题:( ),

我通过本教程学习如何创建菜单获得了菜单 -> Youtube Link

请告诉我如何解决这个问题或推荐我引用类似的帖子,谢谢!

$(document).ready(function() {
  $(".burger-nav").on("click", function() {
    $("header nav ul").toggleClass("open");
  });

});
header nav ul {
  height: 0;
  overflow: hidden;
  background: #6134A3;
}

header nav ul.open {
  height: auto;
}

.burger-nav {
  padding: 0px;
  margin: 0px;
  display: block;
  height: 40px;
  width: 100%;
  cursor: pointer;
  background-image: url(images/nav.png);
  background-repeat: no-repeat;
  background-size: 10%;
  background-position: 97%;
  background-color: #502196;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <title>MENU</title>
  <link rel="stylesheet" href="slicknav.css" />
  <script language="JavaScript" type="text/javascript" scr="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

<style>

</style>

<body>
  <header>
    <div class="wrapper">
      <nav>
        <a class="burger-nav"></a>
        <ul>
          <li><a href="#">item 1</a></li>
          <li><a href="#">item 2</a></li>
          <li><a href="#">item 3</a></li>
          <li><a href="#">item 4</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <!--watch this video to finish drop down https://www.youtube.com/watch?v=FDh7Mdl2oww -->


  <script language="JavaScript" type="text/javascript" scr="menu.js"></script>
</body>

最佳答案

使用最新版本的 jquery....

<head>
  <title>MENU</title>
  <link rel="stylesheet" href="slicknav.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

关于javascript - 导航菜单不会在点击时打开或关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45678301/

相关文章:

JavaScript 作用域无法访问 setInterval

jquery鼠标悬停导致闪烁

javascript - 如何减少 Chart.JS 条形图中图例和图表之间的间距,并在图形区域中增加间距?

javascript - 自定义图标字体未显示在我的网站上但显示给其他人?

jquery - 通过使用 jQuery 动态设置 CSS 值使图像在 div 中居中

javascript - 即时将 console.profile 语句添加到 JavaScript/jQuery 代码中

javascript - HTML5 音频重新开始

javascript - 如果打开压缩,JavaScript 缩小有什么意义吗?

javascript - 如何获取多选下拉列表中当前未选中的复选框的值?

javascript - 在离开页面之前完成 Ajax 请求