javascript - 使用 .slideUp() 后，响应式导航将无法打开

Question

我使用以下代码打开响应式导航并在选择链接时将其关闭:

$(document).ready(function() {

    $(".burger-nav").on("click", function(){

        $("nav ul").toggleClass("open");

    });

    $("nav li a").on("click", function() {

        $("nav ul").slideUp();

    });
});

这工作得很好，但是一旦导航关闭，导航按钮就不起作用了。有人有什么想法吗？如有任何帮助，我们将不胜感激!

导航的 HTML:

<nav id="nav">
<div class="wrapper">
    <div class="brand">
        <img class="logo" src="img/icons/diamond.png" alt="Danny Hatton Logo"><h1>dannyhatton</h1>
    </div>
        <span class="burger-nav"><img src="img/burger.png" alt="Expand navigation"></span>
    <ul>
        <li><a href="#intro" class="slide">Home</a></li>
        <li><a href="#aboutme" class="slide">About Me</a></li>
        <li><a href="#contactme" class="slide">Contact Me</a></li>
        <li><a href="#">Blog</a></li>
    </ul>
</div>
</nav>

Answer 1

使用slideToggle()代替slideUp()，这将触发slideUp()和slideDown()偶数/奇数点击

 $(document).ready(function() {

  $(".burger-nav").on("click", function(){

     $("nav ul").slideToggle();

  });

  $("nav li a").on("click", function() {

      $("nav ul").slideToggle();

   });

});

您可以通过将 display none 添加到 UL 来最初隐藏菜单

<ul style="display:none"> 

然后点击汉堡导航，它将打开菜单，一切都会正常工作

演示:https://jsbin.com/zohoqi/3/edit?html,js,console,output

试试这个一次吧伙计!!