Bootstrap手风琴怎么只展开一个面板？

司马俊蓓提问于 2026-03-03 15:45:25 阅读 6

组件

我用Bootstrap 5写了个手风琴，但点开一个面板后，其他已经打开的不会自动关闭，导致多个面板同时展开。不是说手风琴默认只能展开一个吗？

我检查了data-bs-parent属性，也加了容器ID，但还是不行。这是我的结构：

<div id="myAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Item 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
      <div class="accordion-body">Content 1</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
        Item 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
      <div class="accordion-body">Content 2</div>
    </div>
  </div>
</div>

是不是哪里写错了？为什么不能互斥展开？

我来解答赞 4 收藏

反馈

1 条解答

Prog.景鑫 Lv1

外层容器缺了 class="accordion"，加上它就能互斥展开了。

<div id="myAccordion" class="accordion">

2026-03-04 15:02