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();

   });

});

您最初可以通过向UL

添加display none来隐藏菜单

<ul style="display:none">

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

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

尝试一次好友!!

Answer 2

试试这个：

$(document).ready(function() {

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

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

    });

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

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

    });

});

最终代码：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
</head>
    <body>
        
       <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>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        
        <script>
            
        $(document).ready(function() {

            $(".burger-nav").on("click", function(){

                $("nav ul").slideToggle();

            });

            $("nav li a").on("click", function() {

                $("nav ul").slideUp();

            });

        });
 
        </script>
    </body>
</html>

＆＃13;

Answer 3

感谢所有帮助过这一点的人，@ KrishCdbry是最接近的，但下面是已解决的脚本：

$(document).ready(function() {

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

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

    });

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

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

    });
});

在toggleClass之后唯一的区别是（“打开”），当你知道怎么做时很简单，是吗？

使用.slideUp（）

3 个答案: