淡出菜單onClick功能

Question

好吧，我放棄。 在嘗試谷歌並更改我的代碼后。 我要在這里問這個。 我有一個單擊功能.navTrigger ，一個接一個顯示我的導航菜單的li 。 這工作正常。

只有當我點擊.navTrigger再次我想有它fadeOut再次（這將是真棒，如果它可能是有延遲再次）。 我只是無法理解該如何工作？ （可能非常簡單）...

這是我的代碼：

$('.navTrigger').click(function() {
    $(this).toggleClass('active');
    var delay = 1000;
    $('nav ul > li a').each(function() {
        $(this).delay(delay).fadeIn(500);
        delay += 400;
    });
});

我嘗試用addClass替換toggleClass ，然后添加

if ($('.navTrigger').hasClass('active')) {
    var delay = 1000;
    $('nav ul > li a').each(function() {
        $(this).delay(delay).fadeIn(500);
        delay += 400;
    });
} else {
    var delay = 1000;
    $('nav ul > li a').each(function() {
        $(this).delay(delay).fadeOut(500);
        delay += 400;
    });
}   

但是，是的，這也不起作用……任何幫助都很棒！

Answer 1

您是第二個片段，似乎幾乎是正確的。

我沒有看到您的HTML結構，但您應該能夠切換功能，並添加和刪除active類：

 $('.navTrigger').click(function(){ var delay = 1000; if ($('.navTrigger').hasClass('active')){ $('nav ul > li a').each(function(){ $(this).delay(delay).fadeOut(500); delay += 400; }); $('.navTrigger').removeClass('active'); } else { $('nav ul > li a').each(function(){ $(this).delay(delay).fadeIn(500); delay += 400; }); $('.navTrigger').addClass('active'); } }); 

 nav ul > li a { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="navTrigger">Menu</button> <nav> <ul> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> </ul> 

您還可以使用Joe對此StackOverflow答案的答案來反轉淡出效果：

 $('.navTrigger').click(function(){ var delay = 1000; if ($('.navTrigger').hasClass('active')){ $($('nav ul > li a').get().reverse()).each(function() { $(this).delay(delay).fadeOut(500); delay += 400; }); $('.navTrigger').removeClass('active'); } else { $('nav ul > li a').each(function(){ $(this).delay(delay).fadeIn(500); delay += 400; }); $('.navTrigger').addClass('active'); } }); 

 nav ul > li a { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="navTrigger">Menu</button> <nav> <ul> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> </ul> 

Answer 2

在點擊函數$(this).toggleClass('active');添加此行

$('.navTrigger').click(function(){
$(this).toggleClass('active');
if ($('.navTrigger').hasClass('active')){
    var delay = 1000;
        $('nav ul > li a').each(function(){
            $(this).delay(delay).fadeIn(500);
            delay += 400;
    });
} else {
    var delay = 1000;
        $('nav ul > li a').each(function(){
            $(this).delay(delay).fadeOut(500);
            delay += 400;
    });
}


});