要默认展开某一项，必须同时设置目标元素的collapse和show类、对应按钮的aria-expanded="true"并移除collapsed类，且确保aria-controls与data-bs-target的ID严格匹配。
默认展开某一项：只加 show 类还不够
bootstrap accordion 默认所有项都是收起的，想让某一项“一打开页面就展开”，不能只给目标 <div class="accordion-collapse"> 加 show 类——这会导致它显示，但对应按钮的 aria-expanded 仍是 false，视觉和可访问性状态不一致，屏幕阅读器会误报，且点击后行为异常（比如点一下反而收起）。
必须同步处理三处：
- 目标
<div class="accordion-collapse">同时加show和collapse类（顺序不限，但两个都要有） - 对应的触发按钮（
<button class="accordion-button">）去掉collapsed类，并把aria-expanded改为true -
aria-controls和data-bs-target的值，必须与目标id严格匹配（包括大小写和连字符）
例如让第一项默认展开：
<div class="accordion-item">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
标题一
</button>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#myAccordion">
<div class="accordion-body">内容</div>
</div>
</div>
多个默认展开？别硬改，Accordion 就是设计成单开的
Accordion 的核心逻辑是「一次只开一个」，靠 data-bs-parent 把所有项绑定到同一个容器上实现互斥。如果你强行给多个 accordion-collapse 都加 show，它们确实会同时显示，但按钮的 aria-expanded 状态不会自动同步，用户点击任一按钮时，其他项也不会自动收起——这就退化成了普通 collapse，失去了手风琴意义。
真需要多开，直接换用独立的 collapse 组件，而不是套 accordion 外壳：
- 外层不用
accordion类，也不设data-bs-parent - 每个按钮用
data-bs-toggle="collapse"指向各自目标id - 想默认开哪个，就给对应
collapse加show，其他不加
移动端适配：默认展开 → 移动端收起，不能靠 JS 监听窗口大小
你没法在 CSS 里写 “桌面端加 show，移动端去掉”，因为 show 是类名，不是样式；也不能靠 JS 在 resize 时反复增删 show——这会导致页面加载时闪一下，或横竖屏切换时状态错乱。
正确做法是用 Bootstrap 内置的响应式类组合：
- 给默认要展开的项，同时加
show和collapse - 再加一个隐藏类，如
d-md-block d-lg-block d-none（意思是：仅在中/大屏显示，小屏隐藏） - 但注意：这个隐藏只是视觉隐藏，
show仍存在，所以得配合 JS 在小屏初始化时主动收起
更稳妥的方案是放弃纯 HTML 方案，用少量 JS 初始化判断：
if (window.matchMedia('(max-width: 768px)').matches) {
const el = document.getElementById('collapseOne');
if (el.classList.contains('show')) {
el.classList.remove('show');
}
}
容易被忽略的 ARIA 同步问题
很多人加了 show 却忘了改 aria-expanded，结果按钮说“已展开”，但焦点进入后读出来却是“展开”，或者相反。这对使用读屏软件的用户是严重障碍。
关键点：
-
aria-expanded="true"必须只出现在当前展开项的按钮上 - 所有其他按钮必须是
aria-expanded="false"，且带collapsed类（Bootstrap 5 用它控制按钮图标旋转） -
aria-labelledby的值（如"headingOne"）必须指向按钮的id，不是标题文字的 ID —— 很多人误写成指向<h2 id="headingOne">，其实应该让按钮自己有id="headingOne"
没配对好，不仅影响辅助技术，某些浏览器还会拒绝触发折叠动画。
复杂点不在怎么写，而在每一处 ID、类、属性都得对得上号；少一个 #，漏一个 collapsed，或者大小写差一位，整个手风琴就卡住不动了。
