时间戳

首页 > 解决方案 > jQuery 删除/添加类只工作一次

javascript - jQuery 删除/添加类只工作一次

问题描述

我睡眠不足，不确定是否可以为此使用 toggleClass。但这是我的代码：

$(document).ready(function() {
    // Slide Mobile Filter Sidebar On Screen
    $('#showFilters').on('click', function () {
        $('.filter-sidebar--mobile__close').attr('class', 'filter-sidebar--mobile__close');

        $('.filter-sidebar--mobile')
            .removeClass('slide-out-right is-hidden') // Remove previously added animation remove display none
            .addClass('slide-in-right '); // Add animation
    });

    // Slide Mobile Filter Sidebar Off Screen
    $('.filter-sidebar--mobile__close').on('click', function() {
        $('.filter-sidebar--mobile')
            .addClass('slide-out-right') // Add animation
            .delay(380) // Delay for animation duration -.02s
            .queue(function() {
                $('.filter-sidebar--mobile').addClass('is-hidden'); // Hide after animation finishes
            });

        // Hide Close Button for Mobile Filter
        $('.filter-sidebar--mobile__close').attr('class', 'filter-sidebar--mobile__close is-hidden');
    });
});

此代码仅在一个完整周期内有效。
会发生什么；



演示：https://jsfiddle.net/mfayv8fu/

标签： javascriptjqueryhtmlcss

解决方案

根据JQuery文档：

请注意，当使用 .queue() 添加函数时，我们应确保最终调用 .dequeue() 以便执行行中的下一个函数。

因此，在队列回调中，您的代码应该是：

$('.filter-sidebar--mobile')
    .addClass('is-hidden')
    .dequeue();

或者 ：

从 jQuery 1.4 开始，被调用的函数作为第一个参数传递给另一个函数。调用时，它会自动使下一个项目出列并保持队列移动。我们使用它如下：

.queue(function(next) {
    $('.filter-sidebar--mobile').addClass('is-hidden'); // Hide after animation finishes
    next();
 });

推荐阅读