Bootstrap: 手风琴与折叠面板

Q: 点击 Accordion 的标题时，箭头图标没有旋转？

这是 Bootstrap JS 未正确加载的原因。确保引入了 bootstrap.bundle.min.js 。检查浏览器控制台是否有 JS 报错。

Q: 手风琴默认展开第一个面板但不需要自动折叠功能怎么办？

去掉 data-bs-parent 属性即可。这样每个面板独立工作，不会相互影响。

Q: 可以在 Accordion 内部放复选框或输入框吗？

可以。 accordion-body 中可以放置任意 HTML，包括表单控件。注意点击输入框时不要误触 accordion 的展开/收起，可以使用 event.stopPropagation() 阻止冒泡。

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

第 15 课：提示组件

(2) 🎯 你将学到

使用 Collapse 实现单个元素的展开/收起
使用 Accordion 实现手风琴联动效果
使用 accordion-flush 去除边框
使用 data-bs-parent 控制联动行为
实现独立折叠面板（始终展开模式）

(3) 痛点

Bob 正在制作一个 FAQ 页面，有 8 个常见问题——用 Accordion 实现，用户点击问题展开答案，展开另一个时自动收起前一个，体验流畅且节省页面空间。

(4) 解法

折叠组件用于在有限空间内展示大量内容——用户点击标题展开详情，再点击收起。手风琴是折叠组件的特殊形式：同一时间只有一个面板保持展开。

(5) 收益

使用手风琴可以在有限空间内组织大量内容，保持页面整洁并提升浏览体验。

2. 单个折叠面板

最基础的 Collapse 组件：

HTML

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
    Toggle content
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    This content is hidden by default. Click the button to show or hide it.
  </div>
</div>

▶ 试一试

▶ 示例：折叠面板基础

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Collapse Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <p>
      <a class="btn btn-primary" data-bs-toggle="collapse" href="#singleCollapse" role="button">
        Toggle with link
      </a>
      <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#singleCollapse">
        Toggle with button
      </button>
    </p>
    <div class="collapse" id="singleCollapse">
      <div class="card card-body">
        This content can be toggled using either the link or the button.
      </div>
    </div>

    <hr>

    <p>
      <button class="btn btn-success" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
        Toggle both
      </button>
    </p>
    <div class="row">
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapse1">
          <div class="card card-body">First collapsible panel.</div>
        </div>
      </div>
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapse2">
          <div class="card card-body">Second collapsible panel.</div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ 试一试

(1) Collapse 关键属性

属性/class	说明
`data-bs-toggle="collapse"`	声明触发器
`data-bs-target="#id"`	指定要折叠的元素
`class="collapse"`	默认隐藏
`class="collapse show"`	默认显示（展开状态）
`data-bs-parent="#accordion"`	联动控制（用于 Accordion）

3. 手风琴

Accordion 是多个折叠面板的联动组合，同时最多展开一个。

HTML

<div class="accordion" id="faqAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq1">
        How do I install Bootstrap?
      </button>
    </h2>
    <div id="faq1" class="accordion-collapse collapse show"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Add the CDN link to your HTML head.
      </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="#faq2">
        Does Bootstrap need jQuery?
      </button>
    </h2>
    <div id="faq2" class="accordion-collapse collapse"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        No, Bootstrap 5 uses vanilla JavaScript.
      </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="#faq3">
        What is the grid system?
      </button>
    </h2>
    <div id="faq3" class="accordion-collapse collapse"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Bootstrap uses a 12-column flexbox grid system.
      </div>
    </div>
  </div>
</div>

▶ 试一试

(1) 手风琴结构

元素	class	说明
容器	`accordion`	声明手风琴组
单项	`accordion-item`	单个折叠面板
标题	`accordion-header`	标题行容器
触发器	`accordion-button`	可点击的标题按钮
内容区	`accordion-collapse collapse`	折叠内容
内容体	`accordion-body`	实际显示文字

(2) 关键机制

HTML

data-bs-parent="#faqAccordion"  // 联动（同时只开一个）
class="accordion-collapse collapse show"  // 默认展开
class="accordion-button collapsed"  // 未展开状态

▶ 试一试

4. 手风琴变体

HTML

<!-- Flush (no outer border) -->
<div class="accordion accordion-flush">
  <div class="accordion-item">...</div>
</div>

<!-- 始终展开模式（去掉 data-bs-parent） -->
<div class="accordion" id="multiOpen">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#panel1">
        Panel 1
      </button>
    </h2>
    <!-- No data-bs-parent — independent -->
    <div id="panel1" class="accordion-collapse collapse show">
      <div class="accordion-body">This panel stays open when Panel 2 is opened.</div>
    </div>
  </div>
</div>

▶ 试一试

5. 更多折叠面板示例

▶ 示例：FAQ 手风琴（无边框）

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FAQ Accordion</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="accordion accordion-flush" id="faqAccordion">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
            What is Bootstrap?
          </button>
        </h2>
        <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Bootstrap is a free front-end framework for building responsive websites with HTML, CSS, and JavaScript.</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="#faq2">
            Do I need to know JavaScript?
          </button>
        </h2>
        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Basic Bootstrap components work without JS. Interactive components like modals and carousels need Bootstrap JS.</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="#faq3">
            Is Bootstrap free?
          </button>
        </h2>
        <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Yes, Bootstrap is completely free and open-source under the MIT license.</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="#faq4">
            What is the grid system?
          </button>
        </h2>
        <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Bootstrap's grid uses 12 columns with breakpoints for responsive layouts. Classes like col-md-6 create columns that adjust at different screen sizes.</div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ 试一试

▶ 示例：始终展开模式（独立面板）

HTML

<div class="accordion" id="independentAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelA">
        Skills & Expertise
      </button>
    </h2>
    <div id="panelA" class="accordion-collapse collapse show">
      <div class="accordion-body">HTML, CSS, JavaScript, Bootstrap, React</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="#panelB">
        Work Experience
      </button>
    </h2>
    <div id="panelB" class="accordion-collapse collapse show">
      <div class="accordion-body">Senior Developer at TechCorp (2020-present), Frontend Developer at WebStudio (2018-2020)</div>
    </div>
  </div>
</div>

▶ 试一试

▶ 示例：独立折叠组件

HTML

<div class="container py-4">
  <div class="d-flex gap-2 mb-3">
    <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo1">
      Toggle First
    </button>
    <button class="btn btn-outline-success" data-bs-toggle="collapse" data-bs-target="#demo2">
      Toggle Second
    </button>
    <button class="btn btn-outline-danger" data-bs-toggle="collapse" data-bs-target=".multi-demo">
      Toggle All
    </button>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="collapse multi-demo show" id="demo1">
        <div class="card card-body">
          First panel — visible by default.
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="collapse multi-demo" id="demo2">
        <div class="card card-body">
          Second panel — initially hidden.
        </div>
      </div>
    </div>
  </div>
</div>

▶ 试一试

▶ 示例：卡片内的折叠面板

HTML

<div class="card" style="max-width: 500px;">
  <div class="card-header bg-primary text-white">
    <h5 class="mb-0">Order Summary</h5>
  </div>
  <div class="card-body">
    <p class="card-text">Your order contains 3 items.</p>
    <p>
      <a class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" href="#orderDetails">
        View Details
      </a>
    </p>
    <div class="collapse" id="orderDetails">
      <div class="border rounded p-3 bg-light">
        <div class="d-flex justify-content-between mb-2">
          <span>Wireless Mouse</span><span class="text-muted">$29.99</span>
        </div>
        <div class="d-flex justify-content-between mb-2">
          <span>USB-C Hub</span><span class="text-muted">$39.99</span>
        </div>
        <div class="d-flex justify-content-between">
          <span>Mouse Pad</span><span class="text-muted">$12.99</span>
        </div>
        <hr>
        <div class="d-flex justify-content-between fw-bold">
          <span>Total</span><span>$82.97</span>
        </div>
      </div>
    </div>
  </div>
</div>

▶ 试一试

(1) 折叠/手风琴工作原理

flowchart TD
    A[触发器<br/>data-bs-toggle=collapse] --> B[data-bs-target=#id]
    B --> C[目标元素<br/>class=collapse]
    C --> D{初始状态}
    D -->|无 show| E[默认隐藏]
    D -->|有 show| F[默认展开]
    C --> G{是否有 data-bs-parent}
    G -->|有| H[联动模式<br/>同时只开一个]
    G -->|无| I[独立模式<br/>各自开关]
    H --> J[手风琴 Accordion]
    I --> K[普通 Collapse]

collapse class	效果	说明
`collapse`	默认隐藏	页面加载时不可见
`collapse show`	默认展开	页面加载时可见
`collapsing`	过渡中	动画期间自动添加
`accordion-collapse`	手风琴专用	在 accordion 中使用

data-* 属性	值	作用
`data-bs-toggle`	`collapse`	声明为折叠触发器
`data-bs-target`	`#id` / `.class`	指定控制元素
`data-bs-parent`	`#accordionId`	联动约束（手风琴）
`href`	`#id`	链接型触发器

手风琴变体	class	特点	场景
基础	`accordion`	标准边框	通用场景
无边框	`accordion-flush`	无外边框圆角	FAQ、侧栏
始终展开	去掉 `data-bs-parent`	多面板同时展开	设置面板
卡片内嵌	置于 `card-body` 内	紧凑布局	订单详情

❓ 常见问题

Q Accordion 和 Collapse 有什么区别？

A Collapse 是基础组件——控制单个元素展开/收起。Accordion 是 Collapse 的组合应用——多个面板通过 data-bs-parent 联动，同时只展开一个。

Q 点击 Accordion 的标题时，箭头图标没有旋转？

A 这是 Bootstrap JS 未正确加载的原因。确保引入了 bootstrap.bundle.min.js。检查浏览器控制台是否有 JS 报错。

Q 手风琴默认展开第一个面板但不需要自动折叠功能怎么办？

A 去掉 data-bs-parent 属性即可。这样每个面板独立工作，不会相互影响。

Q 可以在 Accordion 内部放复选框或输入框吗？

A 可以。accordion-body 中可以放置任意 HTML，包括表单控件。注意点击输入框时不要误触 accordion 的展开/收起，可以使用 event.stopPropagation() 阻止冒泡。

Q Accordion 支持键盘导航吗？

A 支持。Bootstrap 的 accordion 实现了键盘交互：Tab 在面板间切换焦点，Enter/Space 展开当前面板，在已展开的面板上再次按 Enter/Space 将其收起。

📖 小节

Collapse：data-bs-toggle="collapse" + data-bs-target="#id" 控制单个元素
Accordion：accordion 容器 + accordion-item + accordion-button + accordion-collapse
data-bs-parent 实现联动，去掉则各自独立
accordion-flush 去边框

📝 作业

⭐ 创建一个 FAQ 手风琴：至少 5 个常见问题，第一个默认展开，其余折叠，使用 accordion-flush 无边框样式。
⭐⭐ 将课后作业的答案用 Accordion 实现——每个问题一个面板，点击展开答案。
⭐⭐⭐ 创建一个侧栏导航手风琴：包含 Dashboard（无子项）、Products（3 个子项）、Orders（2 个子项）、Settings（4 个子项）。

上一课： 提示组件 · 下一课： Bootstrap Icons

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们

Bootstrap: 手风琴与折叠面板

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

(4) 解法

(5) 收益

2. 单个折叠面板

▶ 示例：折叠面板基础

(1) Collapse 关键属性

3. 手风琴

(1) 手风琴结构

(2) 关键机制

4. 手风琴变体

5. 更多折叠面板示例

▶ 示例：FAQ 手风琴（无边框）

▶ 示例：始终展开模式（独立面板）

▶ 示例：独立折叠组件

▶ 示例：卡片内的折叠面板

(1) 折叠/手风琴工作原理

❓ 常见问题

📖 小节

📝 作业

🙏 帮我们做得更好