bootstrap手风琴默认互斥，需移除data-bs-parent并禁用accordion初始化才能实现多面板独立展开；每个collapse须用唯一id、无外层accordion容器，且避免手动js实例干扰。
手风琴折叠靠 data-bs-toggle="collapse" 不够用
Bootstrap 5 的 accordion 默认是「互斥折叠」——点开一个，其他自动收起。但实际业务中常需要多个面板独立展开/收起（比如 FAQ 页面、筛选条件组）。纯 CSS 实现独立折叠的关键，是绕过 Bootstrap 内置的 Accordion JavaScript 行为，只借用其 CSS 类和过渡动画。
禁用默认 JS 行为，保留 CSS 过渡
Bootstrap 5 的手风琴 JS 会监听 data-bs-toggle="collapse" 并强制互斥。要独立折叠，必须移除它对 data-bs-parent 的依赖，并避免初始化 Accordion 实例。
- 删掉所有
data-bs-parent属性（这是互斥逻辑的触发开关） - 不要给容器加
class="accordion"（该类本身不强制互斥，但容易误配 JS 初始化） - 每个折叠项用
class="collapse"+data-bs-toggle="collapse"即可，无需父容器控制 - 确保引入了 Bootstrap 的 CSS（含
.collapse、.collapsing、.show等过渡类定义）
HTML 结构示例：去掉 parent，每个 collapse 自主控制
<div>
<button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
问题一？
</button>
<div id="faq1" class="collapse">
<p>答案一</p>
</div>
</div>
<div>
<button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
问题二？
</button>
<div id="faq2" class="collapse">
<p>答案二</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</div>
</div>
注意：data-bs-target 指向唯一 ID，且每个 id 不重复；没有 data-bs-parent，也没有外层 accordion 容器——这样 JS 就不会注入互斥逻辑。
容易被忽略的兼容性细节
独立折叠看似简单，但有几个隐性坑：
- 如果页面其他地方用了
new bootstrap.Accordion()手动初始化，它可能扫描到这些.collapse元素并强行绑定互斥行为 —— 解决办法是初始化时显式排除它们，或改用data-bs-toggle="collapse"原生触发（不调 JS 初始化） -
.collapse.show的高度过渡依赖height和overflow，若子内容有浮动、绝对定位或display: grid，可能导致动画卡顿或高度计算错误 - 移动端 Safari 对
height: auto过渡支持不稳定，建议配合max-height过渡作为降级（但需预估最大高度）
真正麻烦的不是写法，而是当项目里混用多种初始化方式（HTML data 属性 + JS 实例 + 动态插入 DOM）时，那个没被注意到的 data-bs-parent 或全局 Accordion 初始化，会让折叠突然又变回互斥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
