bootstrap 5 手风琴必备结构为：外层，每个面板，标题内含data-bs-toggle="collapse"按钮，内容区为带id的，其内嵌，且data-bs-target值须与id完全一致（含#）。
Bootstrap 5 原生支持手风琴，不需要额外 JS，但必须严格满足 HTML 结构和 data 属性要求，否则点击没反应、动画卡住或内容不折叠都是结构写错了。
Accordion 的必备 HTML 结构长什么样？
不是随便套个 accordion class 就行——Bootstrap 5 的手风琴依赖精确的父子层级和 data 属性绑定。漏掉任意一层或拼错属性名，整个组件就失效。
- 最外层容器必须有
class="accordion" - 每个面板（item）是
<div class="accordion-item">，不能用 <code>section或div其他 class 替代 - 标题必须是
<h2 class="accordion-header"></h2>，且内部必须包含带data-bs-toggle="collapse"的触发元素（通常是<button></button>） - 内容区必须是
<div class="accordion-collapse collapse">，且必须有 <code>id，且该id要和对应button的data-bs-target值完全一致（含#） - 内容区内部必须包裹一层
<div class="accordion-body"> <p>常见错误：<code>data-bs-target=".my-id"（多写了点）、data-bs-target="my-id"（少写了#）、accordion-body写成accordion-content—— 这些都会让 collapse 完全不工作。如何让多个面板同时展开（默认只允许一个）？
Bootstrap 5 默认开启「互斥模式」：展开一个，其他自动收起。想改成「多选模式」，关键不是改 JS，而是去掉
accordion容器上的data-bs-parent属性，或者把它设为空值。- 如果保留
data-bs-parent="#my-accordion"，所有子项会互相监听，强制单开 - 删掉该属性，或改为
data-bs-parent=""，各面板 collapse 彼此独立 - 注意：即使去掉
data-bs-parent，每个accordion-collapse仍需自己的id和对应的data-bs-target，否则按钮无法控制内容显隐
示例片段：
<div class="accordion"> <br><div class="accordion-item"> <br><h2 class="accordion-header"> <br><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">标题一</button><br> </h2> <br><div id="collapseOne" class="accordion-collapse collapse show"> <br><div class="accordion-body">内容一</div> <br> </div> <br> </div> <br> </div>
为什么点击没反应？检查这三处
90% 的“手风琴不动”问题都出在这三个地方，按顺序排查比重写代码更快：
-
bootstrap.bundle.min.js是否已加载？单独引入bootstrap.min.js不行，因为 collapse 依赖 Popper 和内部 util —— 必须用bundle版本或确保 Popper 已提前加载 - 浏览器控制台是否有
TypeError: Cannot read properties of null (reading 'addEventListener')？大概率是data-bs-target指向的id不存在，或 DOM 尚未加载完就执行了 JS（把 script 放在
- 如果保留
