Bootstrap5折叠面板：节省空间的内容展开/收起

什么是折叠面板？¶

在网页设计中，“折叠面板”（Collapse）是一种常用的交互组件，它能将大量内容“隐藏”起来，用户点击后才会展开显示，这样可以节省页面空间，让界面更简洁。比如常见的 FAQ 列表、产品详情的展开/收起模块，都可以用折叠面板实现。

为什么选择 Bootstrap5 折叠面板？¶

Bootstrap5 提供了现成的折叠组件，无需自己写复杂的 JavaScript 代码，只需通过简单的 HTML 类名和 data 属性就能实现展开/收起效果，还能轻松扩展出“手风琴”等高级交互。

一、准备工作：引入 Bootstrap5¶

要使用 Bootstrap5 的折叠面板，首先需要在 HTML 中引入 Bootstrap5 的 CSS 和 JavaScript 文件。注意：先引入 CSS，再引入 JavaScript（顺序不能错）。

<!-- 引入 Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入 Bootstrap5 JS（依赖 Popper.js） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

二、基础折叠面板：一个触发，一个面板¶

最简单的折叠面板包含两个部分：触发按钮（点击展开/收起）和折叠内容（默认隐藏）。

代码示例：¶

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 折叠面板</title>
  <!-- 引入 Bootstrap5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

  <!-- 触发按钮 -->
  <button class="btn btn-primary" 
          data-bs-toggle="collapse"  <!-- 标记为折叠组件 -->
          data-bs-target="#demoPanel"> <!-- 关联折叠面板的 ID -->
    点击展开内容
  </button>

  <!-- 折叠面板内容 -->
  <div class="collapse mt-2" id="demoPanel"> <!-- collapse 类默认隐藏，show 类默认显示 -->
    这里是需要折叠的内容！比如一段长文本、图片或列表。
    <ul class="mt-2">
      <li>内容项 1</li>
      <li>内容项 2</li>
      <li>内容项 3</li>
    </ul>
  </div>

  <!-- 引入 Bootstrap5 JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键参数说明：¶

data-bs-toggle="collapse"：告诉 Bootstrap 这是一个折叠触发器，点击后会控制目标内容。
data-bs-target="#demoPanel"：指定要控制的折叠面板 ID（# 是必须的，对应折叠面板的 id）。
class="collapse"：默认隐藏内容，点击后会自动显示/隐藏。
class="show"（可选）：如果想让面板默认展开，在折叠内容上添加 show 类即可。

三、手风琴效果：多个折叠面板互斥展开¶

“手风琴”是折叠面板的常见变体，特点是同一时间只能展开一个面板，点击新的面板会自动收起之前展开的面板。实现方式是通过 data-bs-parent 指定共享的父容器。

代码示例：¶

<div class="accordion" id="accordionExample"> <!-- 手风琴的父容器 -->

  <!-- 面板 1 -->
  <div class="accordion-item mb-2">
    <h2 class="accordion-header">
      <button class="accordion-button" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#collapseOne" 
              data-bs-parent="#accordionExample"> <!-- 关联父容器 ID -->
        面板标题 1
      </button>
    </h2>
    <div class="accordion-collapse collapse" id="collapseOne"> <!-- 折叠面板内容 -->
      <div class="accordion-body">
        这里是面板 1 的详细内容...
      </div>
    </div>
  </div>

  <!-- 面板 2 -->
  <div class="accordion-item mb-2">
    <h2 class="accordion-header">
      <button class="accordion-button" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#collapseTwo" 
              data-bs-parent="#accordionExample">
        面板标题 2
      </button>
    </h2>
    <div class="accordion-collapse collapse" id="collapseTwo">
      <div class="accordion-body">
        这里是面板 2 的详细内容...
      </div>
    </div>
  </div>

</div>

关键点：¶

accordion 类：给父容器添加，标记为手风琴组件。
accordion-item 类：每个折叠面板的外层容器，用于分组。
accordion-header 类：标题部分，包含 accordion-button 按钮。
data-bs-parent="#accordionExample"：确保点击一个面板时，其他面板自动收起。

四、样式与自定义¶

Bootstrap5 折叠面板支持通过内置类快速自定义样式，比如修改按钮颜色、图标等。

自定义按钮颜色：¶

只需修改 accordion-button 或触发按钮的 class，例如用 btn-success 替换默认的 btn-primary：

<button class="accordion-button btn-success" ...>

添加图标（可选）：¶

可以用 Bootstrap Icons 或 Font Awesome 图标显示展开/收起状态，例如：

<button class="accordion-button" ...>
  <i class="bi bi-chevron-down me-2"></i> <!-- Bootstrap Icons 向下箭头 -->
  面板标题 1
</button>

展开时，箭头会自动旋转（Bootstrap 会通过 CSS 控制图标方向）。

五、总结¶

Bootstrap5 折叠面板通过简单的 data 属性和类名就能实现展开/收起效果，核心是：
1. 触发按钮：data-bs-toggle="collapse" + data-bs-target="#xxx"；
2. 折叠内容：class="collapse" + 可选 class="show"；
3. 手风琴效果：通过 data-bs-parent 互斥展开多个面板。

应用场景包括 FAQ、产品详情、导航菜单等需要“隐藏/显示”内容的地方，既能节省空间，又能提升用户体验。

注意事项¶

确保 data-bs-target 或 data-bs-parent 的 ID 与折叠内容的 id 完全一致；
引入 Bootstrap5 时，JS 文件必须放在最后，否则折叠功能可能失效；
复杂交互（如动态生成面板）可通过 JavaScript 手动控制 show()/hide() 方法实现。

通过以上步骤，你已经掌握了 Bootstrap5 折叠面板的基础用法，动手试试吧！

Bootstrap5折叠面板：节省空间的内容展开/收起

什么是折叠面板？¶

为什么选择 Bootstrap5 折叠面板？¶

一、准备工作：引入 Bootstrap5¶

二、基础折叠面板：一个触发，一个面板¶

代码示例：¶

关键参数说明：¶

三、手风琴效果：多个折叠面板互斥展开¶

代码示例：¶

关键点：¶

四、样式与自定义¶

自定义按钮颜色：¶

添加图标（可选）：¶

五、总结¶

注意事项¶

相关文章