bootstrap 5 折叠面板（accordion）实现点击一个展开、其他自动收起，核心是三要素：外层容器设唯一 id 并加 class="accordion"；每个子项为直接子元素且用 class="accordion-item"；所有 .accordion-collapse 必须正确设置 data-bs-parent="#id"（含 # 号）。

用 HTML 加 Bootstrap 做折叠面板（Accordion），核心是写对结构、配好属性，不用写一行 JavaScript 就能实现点击一个展开、其他自动收起的效果。

必须写对的三要素

Bootstrap 5 的 Accordion 依赖三个关键点协同工作，缺一不可：

• 外层容器要有唯一 id：比如 <div class="accordion" id="faq-accordion">，这个 id 后面会被所有子项引用<li> <strong>每个折叠项用 <code>accordion-item，且必须是外层容器的直接子元素，不能套额外 div
• 每个内容区的 accordion-collapse 必须带 data-bs-parent="#faq-accordion"，值要和外层 id 完全一致（含 # 号）

标题按钮和内容区怎么连起来

标题按钮和对应内容通过 aria-controls 和 id 匹配，同时靠 data-bs-target 触发切换：


Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。
下载
• 按钮上写 data-bs-target="#collapseOne"，aria-controls="collapseOne"
• 对应的内容区写 id="collapseOne"，并加上 aria-labelledby="headingOne"
• 首项默认展开可加 show 类；不加则全部默认收起

常见失效原因和检查点

如果点了新项、旧项没关，大概率是下面某处出错：

• data-bs-parent 的值漏了 #，比如写成 "faq-accordion" 而不是 "#faq-accordion"
• 外层容器用了 class="accordion" 却没设 id，导致 querySelector 找不到父级
• 多个 Accordion 并存时，共用了同一个 id 或同一组 data-bs-parent 值
• 误在 accordion-collapse 上重复写了 data-bs-toggle="collapse"（Accordion 内部已处理，加了反而干扰）

基础可用代码片段

复制粘贴即可运行（需已引入 Bootstrap 5 CSS 和 JS）：


  

    

      
        常见问题一
      
    

    

      

        这里是答案内容。
      

    

  

  

    

      
        常见问题二
      
    

    

      

        这是第二条答案。