如何实现父折叠元素收起时嵌套折叠元素同步保持收起？

问题根源 #

你遇到的问题核心在于：Bootstrap的Collapse组件不会自动保存子折叠面板的状态。当父折叠面板收起时，子面板只是因为父容器被隐藏而“看起来是收起的”，但它的实际展开/收起状态并没有被修改。等父面板重新展开时，子面板就会恢复之前的状态。

另外你用到的data-bs-parent属性，它的作用是让同一父容器下的多个折叠面板互斥展开（比如展开A就自动收起B），完全不是用来实现“父收起时同步子收起”的功能，所以加了也没用。

解决方法 #

要实现父面板收起时同步收起所有子面板，需要通过JavaScript监听父折叠面板的hide.bs.collapse事件，在父面板开始收起的时机，主动将子折叠面板收起，并同步更新控制按钮的状态。

完整代码示例 #

<div class="row module accordion-toggle collapsed" role="button" data-bs-toggle="collapse"
     data-bs-target="#module-test" aria-expanded="false" aria-controls="module-test">
  <h2>
    <div>
      <div><h3>折叠面板</h3></div>
    </div>
  </h2>
  <div id="module-test" class="collapse">
    <div class="row group accordion-toggle collapsed d-flex" data-permissions-collapse-target="group"
         role="button" data-bs-toggle="collapse" data-bs-target="#group-test_events" aria-expanded="false"
         aria-controls="group-test_events">
      <h2>
        <div>
          <div><h3>嵌套折叠项</h3></div>
        </div>
      </h2>
      <div id="group-test_events" class="collapse">
        <div class="">
          嵌套折叠内容
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// 获取父折叠面板元素
const parentCollapse = document.getElementById('module-test');
// 监听父面板开始收起的事件
parentCollapse.addEventListener('hide.bs.collapse', function () {
  // 遍历父面板内所有子折叠的控制按钮
  this.querySelectorAll('[data-bs-toggle="collapse"]').forEach(btn => {
    const targetEl = document.querySelector(btn.getAttribute('data-bs-target'));
    const collapseInstance = bootstrap.Collapse.getOrCreateInstance(targetEl);
    // 如果子面板是展开状态，主动收起
    if (!targetEl.classList.contains('collapse')) {
      collapseInstance.hide();
    }
    // 更新按钮的状态类和无障碍属性
    btn.classList.add('collapsed');
    btn.setAttribute('aria-expanded', 'false');
  });
});
</script>

关键细节 #

• 选择hide.bs.collapse事件：这个事件在父面板开始收起时触发，是处理子面板状态的最佳时机。
• 手动调用collapseInstance.hide()：这会真正修改子面板的状态，而不是仅仅通过父容器隐藏来视觉上“假装收起”。
• 同步按钮状态：必须更新按钮的collapsed类和aria-expanded属性，确保按钮的视觉和语义状态与子面板一致，符合无障碍规范。

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