求助：实现点击关闭已展开同类型div的JS解决方案

需求说明 #

需要实现：点击展开某类div（展开状态类名为.collapse.in）时，自动关闭其他已展开的同类型div，保证同一时刻仅一个面板处于展开状态。

原代码的关键错误 #

你编写的代码存在以下问题：

• 选择器错误：.collapse in是后代选择器，会匹配.collapse下的in元素，正确的展开状态选择器应为.collapse.in（连写表示同时拥有这两个类的元素）
• 引号错误：$("\".accordianNav\"")中的多余转义会导致选择器失效，直接写$('.accordianNav')即可
• 事件绑定对象错误：应该绑定到触发折叠的按钮（带data-toggle="collapse"的元素），而非已经展开的div本身
• 操作逻辑错误：直接用hide()无法正确触发Bootstrap折叠组件的状态变化，需使用组件自带的.collapse('hide')方法

完整解决方案 #

以下是基于Bootstrap折叠组件逻辑的修正代码：

(function () {
    // 绑定所有折叠触发按钮的点击事件
    $('[data-toggle="collapse"]').on('click', function() {
        // 获取当前按钮对应的目标折叠面板ID
        var targetId = $(this).data('target');
        
        // 关闭所有已展开的面板（排除当前目标）
        $('.collapse.in').not(targetId).collapse('hide');
    });
})();

代码解释 #

1. 事件绑定：监听所有带data-toggle="collapse"属性的按钮点击，这是Bootstrap折叠组件的标准触发元素
2. 获取目标：通过data('target')拿到当前按钮要控制的折叠面板ID
3. 关闭其他面板：选中所有处于展开状态（.collapse.in）的面板，排除当前目标后，调用.collapse('hide')方法关闭，该方法会自动更新组件的类名与状态

额外提示 #

• 确保页面已正确引入jQuery和Bootstrap的JS文件，否则折叠组件方法无法生效
• 若折叠面板是动态生成的（如模板渲染），可使用事件委托绑定：

$(document).on('click', '[data-toggle="collapse"]', function() {
    var targetId = $(this).data('target');
    $('.collapse.in').not(targetId).collapse('hide');
});

内容的提问来源于stack exchange，提问作者1skora