data-bs-parent是Accordion互斥逻辑的硬性开关：必须为含#的唯一ID选择器（如"#myAccordion"），且外层容器需同时具备class="accordion"和对应id，子项须为直接子元素；移除该属性则变为多开模式。
data-bs-parent 是互斥开关，不是可选配置
Bootstrap Accordion 默认互斥展开，根本原因就是 data-bs-parent 属性在起作用。它不是“增强功能”，而是折叠逻辑的硬性开关：只要子项设置了 data-bs-parent="#myAccordion"，且外层容器存在对应 id="myAccordion" 和 class="accordion"，JS 就会自动监听所有子项的展开事件，并主动收起其他已开项。
常见误解是以为“没写 data-bs-parent 就默认多开”——其实不写它，每个 .accordion-item 就彻底独立，变成普通 Collapse，不再有手风琴行为。所谓“不能同时展开多个”，其实是你**写了** data-bs-parent，而它就设计成只允许一个开。
- 移除
data-bs-parent属性，就能让多个面板各自展开/收起，互不影响 - 保留
data-bs-parent但值写错（比如漏掉#、用类名、ID 重复），会导致互斥失效——看起来“能多开”，但这属于 bug 行为，不是预期功能 -
data-bs-parent必须指向一个真实存在的、带class="accordion"的 DOM 元素，否则 Bootstrap 5.3+ 会直接忽略该约束
accordion-item 必须是直接子元素，中间加 wrapper 就断链
即使 data-bs-parent 值正确、ID 唯一，如果 HTML 结构里在 .accordion 和 .accordion-item 之间插了任意一层包装元素（比如 <div class="wrapper">），互斥逻辑就会完全失效。<p>这是因为 Bootstrap 的事件委托依赖严格的父子路径：<code>document.querySelector("#myAccordion") 找到父容器后，内部 JS 只遍历它的 直接子元素 中的 .accordion-item。一旦中间有 wrapper，.accordion-item 就不再是直接子级，JS 根本“看不见”它，自然不会注册互斥监听。
- ✅ 正确结构：
<div class="accordion" id="myAccordion"> <div class="accordion-item">...</div> <div class="accordion-item">...</div> </div> - ❌ 错误结构：
<div class="accordion" id="myAccordion"><div class="wrapper"><div class="accordion-item">...</div></div></div> - 别用
<section></section>或<article></article>替换.accordion-item，JS 识别不到，ARIA 属性也会失效
aria-expanded 和 aria-controls 缺一不可，否则 collapse 动画卡住
很多人删掉 ARIA 属性图省事，结果发现点击按钮没反应、动画不动、屏幕阅读器读不出状态——aria-expanded 和 aria-controls 不是“辅助功能可选项”，而是 Collapse 插件运行时实际读取的状态钩子。
Bootstrap 的 JS 在切换时会检查 aria-expanded="true/false" 来决定当前状态，并通过 aria-controls 的值去查找目标 .collapse 元素。缺任何一个，都可能导致状态判断错误或目标查找失败。
-
aria-expanded必须初始设为"true"或"false"，不能留空或写成"undefined" -
aria-controls的值必须和目标.collapse的id完全一致（大小写、连字符、无空格） - 如果用了
data-bs-parent，还要确保每个.collapse上有aria-labelledby指向对应按钮的id，否则键盘导航和焦点管理会出问题
同一页面多个 Accordion，ID 冲突是最隐蔽的坑
多个 Accordion 共用同一个 id（比如都叫 "#faq-accordion"），浏览器只会返回第一个匹配元素，其余 Accordion 的 data-bs-parent 查找全部失败。表面看是“点一个全开”，实际是 JS 根本没绑定成功，所有项退化为独立 Collapse。
更麻烦的是，这种错误在开发时可能因缓存或局部刷新“偶然正常”，上线后随机失效，极难复现。
- 每个 Accordion 外层容器必须有唯一
id，且所有子项的data-bs-parent必须精确匹配（含#，大小写敏感） - 别用动态 ID 拼接但忘了转义特殊字符（如空格、中文、括号），
querySelector会报错 - 用浏览器控制台执行
document.querySelectorAll('[data-bs-parent]')，再逐个检查其值是否都能document.querySelector(值)到有效元素，是最直接的验证方式
真正容易被忽略的，是 data-bs-parent 和 ARIA 属性的耦合关系——它们不是各自独立生效的，而是一套协作链条。少一个环节，整个折叠逻辑就从“互斥”退化为“不可控”。
