jQuery，點擊顯示/隱藏絕對div

Question

我是新的jQuery代碼..我試圖開發一個“整頁菜單”由我，但我有一些困難隱藏menù在第二次點擊..我試過.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.
           });
       });    
}); 

PS Whit這個代碼當我點擊menù只顯示！

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

小提琴

Answer 2

我建議使用CSS過渡並添加一個類來表示菜單是活動的。

這是以下代碼的jsfiddle： http ： //jsfiddle.net/975va7qv/

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 - 在菜單打開時添加了新類。 添加了left屬性的轉換，以使其平滑過渡。

#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
}

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');
        }
    });    
});

Answer 3

使用標志來設置/恢復動畫。

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

在這里小提琴