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

});

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

HowTo：首先点击动画1，然后点击动画2

1 个答案: