Bootstrap 5 Accordion主体无法展开显示问题求助

以下是几个实用的排查方向，对照你的FAQ SECTION代码逐一检查：

• 确认Bootstrap JS依赖已正确引入
  Bootstrap 5的交互组件（包括Accordion）必须依赖Popper.js和Bootstrap自身的JS文件，且引入顺序不能错：

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
  

  只引入CSS是不够的，缺失JS会直接导致点击交互失效。

• 核对HTML结构与类名规范
  Bootstrap 5对Accordion的结构有严格要求，核心结构不能出错：

  <div class="accordion" id="faqAccordion"> <!-- 外层容器ID -->
    <div class="accordion-item">
      <h2 class="accordion-header" id="faqHeading1">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse1" aria-expanded="true" aria-controls="faqCollapse1">
          你的问题标题
        </button>
      </h2>
      <div id="faqCollapse1" class="accordion-collapse collapse" aria-labelledby="faqHeading1" data-bs-parent="#faqAccordion">
        <div class="accordion-body">
          你的问题内容
        </div>
      </div>
    </div>
  </div>
  

  重点检查：

  • data-bs-toggle="collapse" 和 data-bs-target="#面板ID" 必须一一对应
  • 面板的data-bs-parent属性值要和外层.accordion的ID完全一致
  • 类名拼写正确，比如accordion-collapse、accordion-button，不要混用Bootstrap 4的旧类名

• 排查自定义代码冲突

  • 检查是否有自定义JS阻止了按钮的点击事件（比如错误使用event.preventDefault()）
  • 查看自定义CSS是否强制设置了.accordion-collapse的display: none !important，或者修改了height/overflow属性导致面板无法展开

• 验证ID唯一性
  确保页面中所有Accordion面板的ID都是唯一的，重复ID会导致JS无法正确定位目标元素

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