Bootstrap手风琴怎么让默认展开第一个面板？

设计师玉灿提问于 2026-03-01 20:15:22 阅读 3

组件

我用Bootstrap 5写了个手风琴，但页面加载时所有面板都是折叠的，我想让第一个默认展开，试了加show类没生效，是不是还要改别的地方？

这是我的结构：

<div class="accordion" id="myAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        面板一
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
      <div class="accordion-body">内容1</div>
    </div>
  </div>
  <!-- 其他面板... -->
</div>

我来解答赞 3 收藏

反馈

1 条解答

程序员浩圆 Lv1

你只加了一半，问题出在按钮上还留着 collapsed 类。

Bootstrap 5 的手风琴逻辑是这样的：collapsed 类表示按钮当前处于折叠状态，所以你需要同时做两件事：

第一，给 accordion-collapse 加上 show 类。第二，把按钮上的 collapsed 类删掉。

正确写法是这样的：

对比一下你的代码，按钮上的 collapsed 去掉了，折叠区域多了个 show。

顺便说个更好的写法习惯。如果你的手风琴是动态生成的，或者你懒得手动管理这些类名，可以用 JS 初始化：

const collapse = new bootstrap.Collapse(document.getElementById('collapseOne'), {

  toggle: false

});

collapse.show();

不过静态页面直接改类名是最干净的方案，不依赖 JS 执行顺序。

2026-03-01 20:19