Bootstrap Accordion折叠面板用法 Bootstrap如何实现手风琴效果-Bootstrap教程-PHP中文网

Bootstrap 5 手风琴互斥展开需外层容器设唯一 id 并在子项中用 data-bs-parent="#id" 精确指向；缺 #、ID 不匹配或嵌套结构错误均导致失效，且 aria 属性不可省略。

如何用原生 Bootstrap 5 实现手风琴（Accordion）效果

直接用 accordion 类和配套结构，不写 js 就能实现点击展开、其他项自动收起——这是 bootstrap 5 内置行为，前提是正确设置 data-bs-parent。

必须给最外层容器加 id，所有子项的 data-bs-parent 指向它，否则“互斥折叠”失效（点开一个，别的不会关）
accordion-item 必须是直接子元素；嵌套 div 或加额外 wrapper 会破坏事件委托
aria-expanded 和 aria-controls 不是可选的：缺失会导致屏幕阅读器无法识别状态，也影响部分浏览器的自动聚焦逻辑

示例关键结构：

<div class="accordion" id="myAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        标题一
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#myAccordion">
      <div class="accordion-body">内容</div>
    </div>
  </div>
</div>

为什么加了 `data-bs-parent` 还是不互斥？

常见错误不是漏写，而是值没对上：data-bs-parent 的值必须是 CSS 选择器，且能精确匹配到最外层 accordion 容器——如果用了类名但没加 .，或 ID 前少了 #，就完全失效。

错误写法：data-bs-parent=".accordion"（容器只有 class="accordion"，没设 id）→ 不生效，因为 Bootstrap 内部用 querySelector 查找，而 .accordion 匹配的是类，但折叠逻辑只响应 id 级别的父容器约束
正确写法只有一种：data-bs-parent="#myAccordion"，且确保外层有 <div id="myAccordion" class="accordion"> <li>如果页面多个 accordion 并存，每个都必须用唯一 <code>id，不能共用同一个 data-bs-parent 值

React 项目里用 `react-bootstrap/Accordion` 怎么避免重复渲染

它本质是封装了原生逻辑，但状态由 React 管理，所以不用手动传 data-bs-parent，但要注意组件层级和 key 的稳定性。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

每个 Accordion.Item 必须带 eventKey，且值唯一；如果动态生成列表，别用数组索引当 eventKey（排序/过滤后会错乱）
不要在 Accordion.Body 里放重型组件或未 memo 的子树，展开时会强制重 render 整个 body，哪怕只是展示静态文本
想控制默认展开项？用 defaultActiveKey（字符串或字符串数组），别试图用 activeKey + onSelect 手动同步状态——除非你真需要受控模式

自定义动画或禁用过渡效果怎么改

Bootstrap 5 默认用 CSS transition 控制 height 和 opacity，但直接改 CSS 可能被框架 reset，推荐覆盖变量或用 !important 锁定。

想禁用动画：给 .accordion-collapse 加 transition: none !important;，同时确保 .accordion-body 没额外 padding/margin 动画干扰
想换缓动函数：覆盖 --bs-accordion-transition CSS 变量，例如 --bs-accordion-transition: height 0.3s ease-in-out, opacity 0.2s linear;
注意：修改过渡会影响 show/collapse 类切换时机，如果 JS 依赖 shown.bs.collapse 事件做后续操作，延迟可能变短，得重新校验时序