Bootstrap 折叠面板 Accordion

学习Bootstrap Accordion组件的使用：手风琴效果、自定义样式 · 难度：入门 · +15XP

Accordion 手风琴

Accordion用于在有限空间内展示可折叠的内容区域。

基本结构

<div class="accordion" id="faq">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse"
              data-bs-target="#answer1">
        问题一：如何使用？
      </button>
    </h2>
    <div id="answer1" class="accordion-collapse collapse show"
         data-bs-parent="#faq">
      <div class="accordion-body">答案内容...</div>
    </div>
  </div>
</div>

关键属性

属性	说明
	data-bs-toggle="collapse"	点击切换折叠
	data-bs-target	关联的内容区域
	data-bs-parent	父手风琴ID（实现互斥）
	.show	初始展开
	collapsed	初始折叠状态

Flush样式

<div class="accordion accordion-flush">
  <!-- 无边框无背景的手风琴 -->
</div>

💡 练习

创建FAQ手风琴：3个问答项，默认展开第一项，点击一项时其他自动关闭。