方法文档：首先点击动画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'); 
    }); 

}); 

我知道这是一个有点脏，可能有更好的方法。我没有检查它是否有效，但这只是其中之一，希望它有帮助。