單擊函數中 .each 中的內容僅被調用一次

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();
        });
    });

Answer 2

試試這個，也試試你的 closeMenu 類。

function openMenu() {
    const menuMain = $('.menu');
    const menuWhite = $('.menu__bg.white');
    const menuLightblue = $('.menu__bg.lightblue');
    const menuLinks = $('.menu-links');

    $(menuMain).addClass('open');
    $(menuWhite).addClass('open');
    $(menuLightblue).addClass('open');
    setTimeout(function() {
        $(menuLinks).each(function(i) {
            $(this).delay(100*i).queue( function() { /* staggered add of classes with delay */
                $(this).addClass('visible');
            });
        });
    }, 500); /* the .open classes have 500ms transition, that's why it's 500 timeOut */
};