好吧,我放弃了。在尝试谷歌并更改我的代码之后。我要在这里问这个。我有一个点击函数 .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;
});
}
但是,是的,那也不起作用...任何帮助都会很棒!
最佳答案
你的第二个片段似乎几乎是正确的。
我还没有看到你的 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>
您还可以使用此 StackOverflow Answer by Joe 的答案来反转淡出。 :
$('.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>
关于javascript - FadeOut 菜单 onClick 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48076775/