Accordion项点击后其他全展开，是因为id和aria-labelledby重复导致联动失效；每个item需唯一id、正确data-bs-target和aria-labelledby指向按钮id，禁用手动show类。
为什么点一个Accordion项，其他全跟着展开？
因为 id 和 aria-labelledby 重复了——这是最常踩的坑。Bootstrap 5 的 Accordion 默认靠这些属性做联动，一旦多个 accordion-item 共用同一个 id="collapseOne" 或 aria-labelledby="headingOne"，它就“认不出谁是谁”，结果就是点哪都展开全部。
- 每个
accordion-item必须有唯一id（如id="collapseTwo"） - 对应按钮的
data-bs-target必须带#前缀，且严格匹配该id（如data-bs-target="#collapseTwo"） -
aria-labelledby要指向按钮自身的id（不是内容区的），比如按钮写id="headingTwo"，那内容区就得写aria-labelledby="headingTwo" - 别手动加
show类到多个内容区；Accordion 会自动管理显隐，加了反而破坏行为
想让多个面板独立开关，不互斥，怎么配？
Bootstrap 5 的 Accordion 默认是「手风琴模式」：一次只开一个。如果你要的是「可多开」（比如 FAQ 页面允许用户同时展开多个问题），就不能依赖 accordion 容器的自动行为，得退回到基础 collapse 组件。
- 去掉外层
class="accordion"容器，改用独立的data-bs-toggle="collapse"按钮 +class="collapse"内容块 - 每个按钮配自己的
data-bs-target，彼此无关联，互不影响 - 如果仍想保留 Accordion 的样式（比如边框、间距、箭头图标），可以复用它的 CSS 类，如
accordion-item、accordion-header，但不加accordion父容器 - 注意：这样就失去了
data-bs-parent的联动控制能力，也不再有默认的「收起其他」逻辑
折叠菜单要做二级嵌套，能硬套 Accordion 吗？
不能。原生 Accordion 只管一级联动，二级菜单一展开，父级不会自动高亮，点击子菜单也不会收起兄弟项，体验断裂。
- 多级导航推荐用
accordion套accordion：外层设id="nav-accordion"，每个一级菜单项是accordion-item，其accordion-body内再放一个带data-bs-parent="#nav-accordion"的子accordion - 更稳妥的做法是放弃 Accordion，直接用
collapse+ 手动 JS 控制状态，尤其当需要点击父菜单时展开子菜单、再点一次收起时 - 必须补全
aria-expanded和aria-controls，否则屏幕阅读器无法识别当前展开层级 - 别在子菜单上再写
data-bs-parent指向外层 ID——这会让子菜单受外层控制，点它反而关掉整个导航
React 中用 react-bootstrap/Accordion 怎么避免状态混乱？
关键不是靠组件自动同步，而是把展开状态收归 React 管理。react-bootstrap 的 Accordion 默认不维护内部状态，全靠你传 defaultActiveKey 或用 activeKey + onSelect 控制。
- 要用受控模式：声明
activeKey（字符串或null表示全收起），并在onSelect里更新 state - 多个面板想默认都收起？别设
defaultActiveKey，而是在 state 初始化为null或空数组（配合alwaysOpen={false}） - 如果用了
alwaysOpen，activeKey就得是数组，且每个AccordionItem的eventKey必须唯一、不可为空字符串 - 别在
AccordionItem上直接写onClick改状态——它和onSelect冲突，容易丢事件
data-bs-parent，都会让行为失准。越是想“省事”直接复制粘贴示例代码，越容易卡在某个展开/收起不响应的细节里。 
