Javascript jQuery，单击显示/隐藏绝对div

我是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>

jQuery

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

---

当我单击“仅显示男人”时，请使用此代码

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

$("#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);
 });

---

使用标志设置/还原动画

var flag=0; //Initial value to 0
$(document).ready(function() {
   $("#bars").click(
       function (){
           if(flag==0) //Check here
           $(".nav-default").animate({
               left: "0"
           }, 1000, function() {
               flag=1; 
           });
           else
               $(".nav-default").animate({
               left: "-100%"
           }, 1000, function() {
               flag=0;
           });
       });    
});

---

Fiddle

我建议使用CSS转换并添加一个类来表示菜单处于活动状态

下面是以下代码的JSFIDLE：

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>

JQuery

$(document).ready(function() {
    var nav = $('.nav-default'),
        bar = $('#bars');

    bar.click(function (){
        // Check to see if the nav is open
        if (nav.hasClass('is-open')) {
            // If it is, close it
            nav.removeClass('is-open');
        } else {
            // Nav is closed - open it up
            nav.addClass('is-open');
        }
    });    
});

#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;
    transition: left .5s ease;
}

.nav-default.is-open {
    left: 0
}

$(document).ready(function() {
    var nav = $('.nav-default'),
        bar = $('#bars');

    bar.click(function (){
        // Check to see if the nav is open
        if (nav.hasClass('is-open')) {
            // If it is, close it
            nav.removeClass('is-open');
        } else {
            // Nav is closed - open it up
            nav.addClass('is-open');
        }
    });    
});