淡出菜单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;
    });
}


});