默认展开第一个面板只需给对应accordion-collapse元素添加show类并删除collapsed类，同时将对应按钮的aria-expanded设为true。
默认展开第一个面板：加 show 类就行
bootstrap 5 的 accordion 默认全部收起，想让第一个面板一打开就展开，不需要写 js，只改 html 就行。关键就是给对应 accordion-collapse 元素加上 show 类 —— 它会同时触发显示和过渡动画。
-
show必须加在<div class="accordion-collapse collapse">上，不是加在accordion-item或按钮上 - 如果还加了
collapsed类，得删掉，否则会冲突（collapsed是 Bootstrap 内部用来标记“已折叠”状态的，手动加会导致样式错乱） - 对应按钮的
aria-expanded要同步设为true，不然屏幕阅读器会误读状态
示例：
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
多个面板默认展开？Bootstrap 原生不支持
Accordion 的设计逻辑是“手风琴式”——一次只开一个。如果你给多个 accordion-collapse 都加 show，视觉上确实都展开了，但点击任意按钮后，其他面板会自动收起。这不是 bug，是 data-bs-parent 的强制行为。
- 要真正实现“多开”，得去掉所有面板的
data-bs-parent属性，让它们各自独立（变成普通 Collapse，不再是 Accordion） - 去掉后，每个面板的
aria-controls和aria-labelledby仍需保持唯一，否则无障碍支持会出问题 - 此时按钮的
data-bs-toggle和data-bs-target还得一一对应，不能共用同一个 ID
为什么加了 show 还不展开？检查这几个地方
常见现象是加了类但页面加载后还是收着，大概率是以下三处之一没对：
- Bootstrap JS 没加载成功（特别是用了 CDN 时路径错误，或被缓存了旧版）；确认控制台无
Bootstrap's JavaScript requires Popper或Cannot read property 'Collapse' of undefined类报错 -
data-bs-parent的值写错了，比如写成#accordion但实际容器 ID 是accordionExample，会导致所有折叠项被“重置”为收起 - CSS 被覆盖：某些自定义样式可能把
.collapse.show的height或opacity强制设为 0，用浏览器开发者工具检查计算样式就能发现
用 JS 动态控制展开状态更灵活
如果默认展开逻辑依赖用户权限、URL 参数或异步数据，硬写 HTML 就不够用了，得用 JS 初始化。
- 用
bootstrap.Collapse.getOrCreateInstance()获取实例，再调用show()方法 - 注意：必须等 DOM 加载完再执行，否则元素还没生成，实例拿不到
- 如果页面有多个 Accordion，别用
document.querySelectorAll('.accordion-collapse')批量操作，容易误触非目标面板；推荐用唯一 ID 定位
示例：
const collapseOne = bootstrap.Collapse.getOrCreateInstance('#collapseOne'); collapseOne.show();
Bootstrap 的 Accordion 默认行为很保守，但它的“约束”恰恰是为了可访问性和一致性。很多人卡在加了 show 却不生效，其实问题往往不在 Collapse 本身，而在父级绑定、JS 加载顺序或 CSS 干扰这些外围环节。 
