如何为无自动折叠功能的手风琴插件实现点击当前项折叠其他项？

我明白你遇到的核心困扰了——既要适配这款插件“移除.collapsed类才展开”的反向逻辑，又要解决parent()定位DOM元素的局限性。下面给你一套针对性的解决方案：

核心实现思路 #

1. 点击手风琴头部时，精准定位当前手风琴的完整容器（避开parent()的层级限制）
2. 选中所有非当前的手风琴项，给它们的内容区域添加.collapsed类（实现折叠）
3. 按需处理当前手风琴项的展开/折叠状态

完整jQuery代码 #

// 绑定手风琴头部的点击事件
$('.mx-groupbox-header').on('click', function(e) {
    // 阻止插件默认事件（避免和自定义逻辑冲突）
    e.stopPropagation();
    
    // 精准定位当前手风琴容器（closest会向上查找最近的匹配元素，比parent()更健壮）
    const currentAccordion = $(this).closest('.mx-groupbox');
    
    // 筛选出所有非当前的手风琴项
    const otherAccordions = $('.mx-groupbox').not(currentAccordion);
    
    // 给其他手风琴的内容区域添加.collapsed类，实现折叠
    otherAccordions.find('.mx-groupbox-content').addClass('collapsed');
    
    // 处理当前项：如果当前是折叠状态，就移除.collapsed展开它；已展开则保持状态（可按需调整）
    const currentContent = currentAccordion.find('.mx-groupbox-content');
    if (currentContent.hasClass('collapsed')) {
        currentContent.removeClass('collapsed');
    }
});

// 可选：页面初始化时默认展开第一个手风琴，折叠其他项
$(document).ready(function() {
    const firstAccordion = $('.mx-groupbox').first();
    firstAccordion.find('.mx-groupbox-content').removeClass('collapsed');
    $('.mx-groupbox').not(firstAccordion).find('.mx-groupbox-content').addClass('collapsed');
});

关键细节说明 #

• 为什么不用parent()？如果你的.mx-groupbox-header直接父元素不是手风琴容器（比如中间有额外包装层），parent()会定位错误。closest('.mx-groupbox')会向上查找最近的匹配容器，适配更多DOM结构场景。
• 适配反向逻辑：这款插件的规则是移除.collapsed=展开，所以要折叠其他项，就得给它们的内容区域添加.collapsed类，这一点和常规手风琴逻辑完全相反，一定要注意。
• 事件冲突处理：用e.stopPropagation()可以避免插件自带的点击事件和自定义脚本冲突，确保逻辑正常执行。

调试小技巧 #

如果脚本没生效，你可以在浏览器控制台打印currentAccordion和otherAccordions，确认选择器是否正确选中了目标元素；同时检查内容区域的类名是不是.mx-groupbox-content，根据实际DOM结构调整选择器即可。

内容的提问来源于stack exchange，提问作者Sander Schaeffer