javascript - jQuery，在点击时显示/隐藏绝对div

Question

我是 jQuery 代码的新手。我试图自己开发一个“完整页面菜单”，但我很难在第二次单击时隐藏菜单。我试过 .toggle() 但我读到它已经退休了。 。 你能帮助我吗？非常感谢，抱歉我的英语不好。

HTML

<div class="container">   
   <a id="bars" href="#">Apri/Chiudi Menù</a>
</div>

<nav id="nav" class="nav-default">
    <ul>
       <li>Home</li>
       <li>Servizi</li>
       <li>Portfolio</li>
       <li>Contatti</li>
    </ul>
</nav>

CSS

#bars {
   position: fixed;
   z-index: 2;
}

#nav {
   position: absolute;
   width: 100%;
   height: 100%;
   text-align: center;
}

#nav ul {
   list-style: none;
}

.nav-default {
   left: -100%;
   top:0;
   background: #ccc;
}

jQuery

$(document).ready(function() {
   $("#bars").click(
       function (){
           $(".nav-default").animate({
               left: "0"
           }, 1000, function() {
               // Animation complete.
           });
       });    
}); 

请注意，当我点击菜单时，此代码只会显示!

Answer 1

您没有为重置动画编写代码。这就是为什么它在这里只移动一次，如果类存在移动，我会重置动画。如果您有任何问题，请查看并告诉我。

$("#bars").click(function (){
           var move;
           if(!$(".nav-default").hasClass('moved')){
               var move = 0;
               $(".nav-default").addClass('moved');
           }
           else{
                var move = "-100%";
                $(".nav-default").removeClass('moved');      
            }
             $(".nav-default").animate({
               left: move
           }, 1000);
 });

Fiddle