如何：第一次单击动画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端执行此操作，为什么不尝试添加一个count变量，看看它是否有效：

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

});

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