使用jQuery实现点击打开当前手风琴并动态关闭其他已展开面板

问题原因 #

Bootstrap自带的手风琴互斥关闭功能未生效，核心错误点如下：

• 按钮上的data-parent属性值和外层表单id不匹配：你代码里表单id为formId，但data-parent写的是#form，父容器匹配失败导致互斥逻辑不触发
• 按钮的aria-controls属性没有正确绑定对应折叠面板的id，折叠面板也未绑定父容器属性

修复方案1：使用Bootstrap原生能力（无需额外写JS） #

直接修改HTML属性即可，修改后完整代码如下：

<form name="form" id="formId">
    <div class="form-group">
        <button type="button" class="filtre-collapse departement accordion collapsed" data-toggle="collapse" data-parent="#formId" aria-expanded="false" aria-controls="form-group1">
            Form group 1 <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </button>
        <div id="form-group1" class="collapse" data-parent="#formId">
            <fieldset>
                <div class="checkbox-option">
                    <label class="option"><span>vehicle1 </span> <input type="checkbox" name="" value="" /> </label>
                </div>
                <div class="checkbox-option">
                    <label class="option"><span>vehicle2 </span> <input type="checkbox" name="" value="" /> </label>
                </div>
            </fieldset>
        </div>
    </div>

    <div class="form-group">
        <button type="button" class="filtre-collapse departement accordion collapsed" data-toggle="collapse" data-parent="#formId" aria-expanded="false" aria-controls="form-group2">
            Form group 2 <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </button>
        <div id="form-group2" class="collapse" data-parent="#formId">
            <fieldset>
                <div class="checkbox-option">
                    <label class="option"><span>vehicle1 </span> <input type="checkbox" name="" value="" /> </label>
                </div>
                <div class="checkbox-option">
                    <label class="option"><span>vehicle2 </span> <input type="checkbox" name="" value="" /> </label>
                </div>
            </fieldset>
        </div>
    </div>

    <div class="form-group">
        <button type="button" class="filtre-collapse departement accordion collapsed" data-toggle="collapse" data-parent="#formId" aria-expanded="false" aria-controls="form-group3">
            Form group 3<i class="fa fa-chevron-right" aria-hidden="true"></i>
        </button>
        <div id="form-group3" class="collapse" data-parent="#formId">
            <fieldset>
                <div class="checkbox-option">
                    <label class="option"><span>vehicle1 </span> <input type="checkbox" name="" value="" /> </label>
                </div>
                <div class="checkbox-option">
                    <label class="option"><span>vehicle2 </span> <input type="checkbox" name="" value="" /> </label>
                </div>
            </fieldset>
        </div>
    </div>
</form>

修改点说明：

• 所有data-parent属性值统一改为#formId，匹配外层表单的id
• 每个按钮的aria-controls属性值改为对应折叠面板的id，比如第一个按钮对应form-group1
• 每个折叠面板都加上data-parent="#formId"属性，绑定父容器

修复方案2：自定义JS实现（不受Bootstrap版本限制） #

如果不想修改原有HTML属性，可以直接加入以下JS代码实现互斥关闭：

// 监听所有手风琴按钮的点击事件
document.querySelectorAll('.accordion').forEach(btn => {
  btn.addEventListener('click', function() {
    // 先关闭所有已展开的折叠面板
    document.querySelectorAll('.collapse.show').forEach(panel => {
      // 排除当前点击对应的面板
      if(panel !== this.nextElementSibling) {
        panel.classList.remove('show')
        // 同步修改对应按钮的状态
        const prevBtn = panel.previousElementSibling
        prevBtn.classList.add('collapsed')
        prevBtn.setAttribute('aria-expanded', 'false')
      }
    })
  })
})

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