内容在里面.点击函数中的每个只被调用一次

Question

我今天在编写菜单打开动画时遇到了一个问题。

单击菜单按钮，菜单将打开，其中的元素将添加一个类(使它们淡入(。

再次单击菜单按钮，菜单将关闭，类将从所有元素中删除，导致它们再次淡出。

不幸的是，向元素中添加类只起一次作用。打开和关闭菜单是可行的，但openMenu((中的.each函数中的内容似乎只运行一次，然后就不会再运行了。menuMain、White和Lightblue上的addClass仍然有效。

不幸的是，到目前为止，我试图解决这个问题的努力都没有成功。如果有人知道为什么会发生这种情况，以及我如何使openMenu((中的.each中的内容能够多次运行，我将不胜感激。

$( document ).ready(function() {
/* ...Other Code... */
const menuMain = $('.menu');
const menuWhite = $('.menu__bg.white');
const menuLightblue = $('.menu__bg.lightblue');
const menuCircle = $('.menu__bg-circle')
const menuLinks = $('.menu-links')
function openMenu() {
$(menuMain).addClass('open'); /* works! */
$(menuWhite).addClass('open'); /* works! */
$(menuLightblue).addClass('open'); /* works! */
setTimeout(function() {
$(menuLinks).each(function(i) { /* works only ONCE */
console.log('test');
$(this).delay(100*i).queue( function() { /* Staggered adding of Class */
$(this).addClass('visible');
});
});
$(menuCircle).addClass('visible'); /* works! */
}, 500); /* .open has 500ms transition, classes are only added after menu is fully open. */
};
function closeMenu() {
$(menuMain).removeClass('open'); /* works! */
$(menuWhite).removeClass('open'); /* works! */
$(menuLightblue).removeClass('open'); /* works! */
$(menuCircle).removeClass('visible'); /* works! */
$(menuLinks).each(function() {
if ($(this).hasClass('visible')) {
$(this).removeClass('visible');
};
});
};
$('.menu__button').on('click', function() {
var clicks = $(this).data('clicks');
if (clicks) {
$("body").css("overflow-y", "auto");
animationMenu.setDirection(-1); /* Lottie Animation */
animationMenu.play(); /* Lottie Animation */
closeMenu();
} else {
$("body").css("overflow-y", "hidden");
animationMenu.setDirection(1); /* Lottie Animation */
animationMenu.play(); /* Lottie Animation */
openMenu();
}
$(this).data("clicks", !clicks);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

经过几次尝试，我终于找到了它，老实说，这实际上是一个很容易的解决方案。问题出在队列函数上。元素在打开的第一个菜单中排队，因此不能再次排队。添加$(this(.dequeue((；在$(this(.addClass('visible'(之后；修复了它，因为现在每个元素都在类添加完成后退出队列，并准备再次排队。

$(menuLinks).each(function(i) {
console.log(i);
$(this).delay(100*i).queue( function() {
$(this).addClass('visible');
$(this).dequeue();
});
});