bootstrap 5 的 accordion 默认点击其他项自动关闭，关键在于正确使用 data-bs-parent 属性指向唯一 id 的父容器；若未设置或指向错误，则无法实现互斥折叠。
bootstrap 5 的 accordion 默认就是点击其他项自动关闭的
如果你发现点击新面板时旧面板没关闭，大概率是没用对 data-bs-parent 属性，或者误用了多个独立的 accordion 实例。bootstrap 5 的折叠组件依赖这个属性来建立“互斥组”关系。
关键点：所有属于同一组的 .accordion-item 必须包裹在一个有唯一 ID 的容器里，且每个 .accordion-collapse 都要通过 data-bs-parent 指向它。
- ✅ 正确写法：
<div id="my-accordion"> <div class="accordion-item"> <h2 class="accordion-header">...</h2> <div class="accordion-collapse" data-bs-parent="#my-accordion">...</div> </div> </div> - ❌ 常见错误：漏掉
data-bs-parent，或指向了不存在的 ID，或多个 accordion 容器没统一父级 - ⚠️ 注意：不要给同一个
.accordion-collapse同时加data-bs-toggle="collapse"和data-bs-toggle="accordion"，后者已隐含前者逻辑
手动控制多个 collapse 时如何实现“点击其他关闭”
如果你没用 accordion 结构，而是直接用 collapse + data-bs-toggle="collapse"，那默认不联动。需要自己监听并关闭其他项。
推荐用事件委托，避免重复绑定：
- 监听
click到所有触发按钮上（比如[data-bs-toggle="collapse"]） - 在回调里先调用
bootstrap.Collapse.getInstance(el).hide()关闭所有已展开的.collapse.show - 再让当前目标 toggle —— 注意要用
show()或toggle()，别漏掉这步 - 示例片段：
document.addEventListener('click', e => { const btn = e.target.closest('[data-bs-toggle="collapse"]'); if (!btn) return; const target = document.querySelector(btn.getAttribute('href') || btn.getAttribute('data-bs-target')); // 关闭所有其他 document.querySelectorAll('.collapse.show').forEach(el => { if (el !== target) bootstrap.Collapse.getInstance(el)?.hide(); }); });
使用 JavaScript API 控制时容易忽略的细节
直接调用 bootstrap.Collapse 构造函数或静态方法时，hide() 不会抛错，但若目标元素还没初始化过 Collapse 实例，getInstance() 会返回 null。
- 务必检查实例是否存在：
bootstrap.Collapse.getInstance(el)返回null表示未初始化，不能直接链式调用hide() - 如果元素是动态插入的，记得手动
new bootstrap.Collapse(el)初始化，否则data-bs-*属性不会生效 -
toggle()和show()是异步的，它们返回 Promise；hide()也是，但常被忽略——想等收起完成再执行后续操作？得.then()
为什么 Bootstrap 4 和 5 的行为看起来不一样
Bootstrap 4 的 data-parent 是作用在触发按钮上的，而 Bootstrap 5 改为作用在 .accordion-collapse 上，且必须指向父容器 ID（不是按钮容器）。这个改动导致很多迁移项目出现“不自动关闭”问题。
- Bootstrap 4 写法（已废弃）：
<a data-parent="#my-accordion"></a> - Bootstrap 5 正确写法：
<div class="accordion-collapse" data-bs-parent="#my-accordion"> <li>如果你混用 4/5 的文档或代码片段，很容易卡在这里</li> <li>检查控制台有没有警告：比如 <code>Cannot find parent element for collapse，这就是data-bs-parent失效的明确信号
实际项目中最容易栽在 data-bs-parent 的 ID 拼写、层级嵌套过深导致选择器失效，或者忘了给父容器加 ID——这些地方不报错，但功能静默失败。
