<p>Bootstrap 5 折叠面板（Accordion）实现点击一个展开、其他自动收起，核心是三要素：外层容器设唯一 ID 并加 class="accordion"；每个子项为直接子元素且用 class="accordion-item"；所有 .accordion-collapse 必须正确设置 data-bs-parent="#id"（含 # 号）。</p>
用 HTML 加 Bootstrap 做折叠面板（Accordion），核心是写对结构、配好属性，不用写一行 JavaScript 就能实现点击一个展开、其他自动收起的效果。
必须写对的三要素
Bootstrap 5 的 Accordion 依赖三个关键点协同工作，缺一不可：
-
外层容器要有唯一 id：比如
<div class="accordion" id="faq-accordion">，这个 id 后面会被所有子项引用 -
每个折叠项用
accordion-item，且必须是外层容器的直接子元素，不能套额外 div -
每个内容区的
accordion-collapse必须带data-bs-parent="#faq-accordion"，值要和外层 id 完全一致（含 # 号）
标题按钮和内容区怎么连起来
标题按钮和对应内容通过 aria-controls 和 id 匹配，同时靠 data-bs-target 触发切换：
- 按钮上写
data-bs-target="#collapseOne"，aria-controls="collapseOne" - 对应的内容区写
id="collapseOne"，并加上aria-labelledby="headingOne" - 首项默认展开可加
show类；不加则全部默认收起
常见失效原因和检查点
如果点了新项、旧项没关，大概率是下面某处出错：
立即学习“前端免费学习笔记（深入）”；
-
data-bs-parent的值漏了#，比如写成"faq-accordion"而不是"#faq-accordion" - 外层容器用了 class="accordion" 却没设 id，导致
querySelector找不到父级 - 多个 Accordion 并存时，共用了同一个 id 或同一组
data-bs-parent值 - 误在
accordion-collapse上重复写了data-bs-toggle="collapse"（Accordion 内部已处理，加了反而干扰）
基础可用代码片段
复制粘贴即可运行（需已引入 Bootstrap 5 CSS 和 JS）：
<div class="accordion" id="my-accordion"><div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
常见问题一
</button>
</h2>
<div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="heading1" data-bs-parent="#my-accordion">
<div class="accordion-body">
这里是答案内容。
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
常见问题二
</button>
</h2>
<div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#my-accordion">
<div class="accordion-body">
这是第二条答案。
</div>
</div>
</div>
</div>
