方法文檔：首先點擊動畫1，第二次點擊動畫2

Question

我將建立一個動畫如下移動漢堡菜單：

1）漢堡菜單上，單擊1：菜單打開動畫...導航鏈接淡入最後
2）漢堡菜單上，單擊2：導航鏈接淡出第一...菜單關閉動畫

我用jQuery動畫：

/* mobile menu fx */ 
$(document).ready(function(){ 

    $('#nav-icon4').click(function(){ 
     $(this).toggleClass('open'); 
     $('#mobile-menu').toggleClass('open'); 
     $('#mobile-menu-elements').toggleClass('open'); 
     $('#mobile-menu-blurredBg').toggleClass('open'); 
     $('#mobile-menu-elements-ul').toggleClass('open'); 
    }); 

}); 

如何爲第二次點擊設置不同的課程（關閉菜單）？

Answer 1

如果你想這樣做的JS的一面，你爲什麼不嘗試添加一個計數變量，看看它是否工作：

/* mobile menu fx */ 
$(document).ready(function(){ 

    var count = 0; 

    $('#nav-icon4').click(function(){ 
     if(count == 0){ 
      // do something in the first click; 
      count++; 
     } else{ 
      // do something in the second click; 
      count=0;; 
     } 
    // Dont know which one goes in the first or in the second click 
    $(this).toggleClass('open'); 
    $('#mobile-menu').toggleClass('open'); 
    $('#mobile-menu-elements').toggleClass('open'); 
    $('#mobile-menu-blurredBg').toggleClass('open'); 
    $('#mobile-menu-elements-ul').toggleClass('open'); 
    }); 

}); 

我知道這是一個有點髒，可能有更好的方法。我沒有檢查它是否有效，但這只是其中之一，希望它有幫助。