如何：第一次單擊動畫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');
    });

});

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