Question

我缺乏睡眠，不确定我是否可以使用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');
    });
});

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

开启时：没有移动过滤器（按预期方式）
点击#showFilters按钮
.filter-sidebar - 移动从右侧滑入（如预期的那样）
点击.filter-sidebar - mobile__close，.filter-sidebar - 移动向右滑动（按预期方式）
再次点击#showFilters按钮
.filter-sidebar - 移动从右侧滑入（再次按预期方式）
点击.filter-sidebar - mobile__close，.filter-sidebar - 移动动画播放，但这次不会隐藏

Demo: https://jsfiddle.net/mfayv8fu/

Answer 1

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

Answer 2

您在查询课程时错过了点号

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

将其更改为

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

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

2 个答案: