同一元素slideUp与slideDown切换功能实现问题

算力阿峰

2026-7-18

网格元素点击展开/切换/收起交互优化

需求：

点击网格内某元素，其关联内容通过slideDown展开；
点击同一网格内其他元素，对应内容展开，同时收起之前展开的内容；
重复点击同一元素时，执行slideUp收起内容。

初始代码无法实现重复点击收起的效果，重复点击时仍会触发slideDown：

初始代码

$(".g-item").on("click", function () {
    $(".g-item").removeClass('is-active');
    $(this).addClass('is-active');
    $(".g-inner").fadeOut();
    if ($(this).hasClass('is-active')) {
        $(this).parent().find(".is-active [data-grid_content]").slideDown();
    } else {
        $(this).parent().find(".is-active [data-grid_content]").slideUp();
    }
});

问题原因

初始代码每次点击都会先移除所有.g-item的is-active类，再给当前元素添加该类，导致if判断永远为真，只会执行slideDown逻辑，无法触发收起操作。

修改后的代码

jQuery(".g-item").on("click", function () {
    // 先收起其他已激活元素的内容并移除激活状态
    jQuery(".g-item.is-active").not(this).find("[data-grid_content]").slideUp().end().removeClass('is-active');
    
    if ($(this).hasClass("is-active")) {
        $(this).find("[data-grid_content]").slideUp();
        $(this).removeClass('is-active');
    } else {
        $(this).addClass('is-active');
        $(this).find("[data-grid_content]").slideDown();
    }
});