Bootstrap accordion组件在同站点非首页页面无法展开折叠问题咨询

问题原因与排查方案 #

Bootstrap的手风琴交互依赖其配套的JavaScript组件实现，你当前提供的代码仅引入了Bootstrap CSS，未引入对应JS文件，这是最常见的点击无响应原因。你可以按以下顺序排查修复：

• 检查是否引入Bootstrap JS
  你首页能正常运行大概率是引入了JS，复制头部的时候漏了这部分。直接在页面</body>标签之前添加和你CSS版本匹配的Bootstrap 5.1.3 JS引入代码即可：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

• 检查ID重复冲突
  如果你当前页面存在多个手风琴组件，需要保证每个手风琴的外层ID、每个折叠项的heading ID、折叠面板ID全局唯一，ID重复会导致点击时无法匹配到对应的展开面板。
• 检查自定义资源冲突
  临时注释掉你页面引入的stylesheet-search.css自定义样式，测试手风琴是否恢复正常：如果恢复，说明你的自定义样式中存在比如给.accordion-button设置pointer-events: none这类阻止点击的规则，找到对应规则删除即可。
• 检查属性拼写
  确认手风琴按钮的data-bs-toggle="collapse"、data-bs-target值、折叠面板的data-bs-parent值和外层手风琴的ID完全匹配，没有拼写错误。

内容的提问来源于stack exchange，提问作者Chrisk