手风琴（Accordion）

使用折叠面板组件可以创建可折叠的内容面板，Bootstrap 5 的手风琴基于 collapse 插件构建，支持垂直折叠面板，可同时展开多个或限制为单面板展开。

基本手风琴

使用 .accordion 包裹多个 .accordion-item 创建手风琴效果：

这是第一个面板的内容。默认展开。

这是第二个面板的内容。默认折叠。

这是第三个面板的内容。默认折叠。

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h3 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                面板一
            </button>
        </h3>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                内容区域
            </div>
        </div>
    </div>
</div>

始终折叠模式

省略 data-bs-parent 属性，使每个面板独立折叠，不互斥：

<div class="accordion" id="accordionNoCollapse">
    <div class="accordion-item">
        <h3 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#noCollapseOne">
                面板一
            </button>
        </h3>
        <div id="noCollapseOne" class="accordion-collapse collapse">
            <div class="accordion-body">
                此面板不受其他面板状态影响
            </div>
        </div>
    </div>
</div>

嵌套手风琴

手风琴可以互相嵌套，但注意每个手风琴需要独立的 id：

<div class="accordion" id="parentAccordion">
    <div class="accordion-item">
        <h3 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#parentOne">
                外部面板
            </button>
        </h3>
        <div id="parentOne" class="accordion-collapse collapse" data-bs-parent="#parentAccordion">
            <div class="accordion-body">
                <div class="accordion" id="childAccordion">
                    <div class="accordion-item">
                        <h3 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#childOne">
                                子面板
                            </button>
                        </h3>
                        <div id="childOne" class="accordion-collapse collapse" data-bs-parent="#childAccordion">
                            <div class="accordion-body">嵌套内容</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

自定义样式

通过覆盖 CSS 变量自定义手风琴样式：

.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: var(--bs-body-bg);
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-active-color: var(--bs-primary);
    --bs-accordion-active-bg: rgba(var(--bs-primary-rgb), 0.1);
    --bs-accordion-border-radius: 0.5rem;
}

手风琴变体

无边框手风琴

添加 .accordion-flush 类移除默认边框和圆角：

<div class="accordion accordion-flush" id="accordionFlush">
    <div class="accordion-item">
        <h3 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flushOne">
                无边框面板
            </button>
        </h3>
        <div id="flushOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
            <div class="accordion-body">无边框样式内容</div>
        </div>
    </div>
</div>

JavaScript API

// 通过 data 属性（推荐）
data-bs-toggle="collapse"
data-bs-target="#collapseTarget"

// 编程式控制
const collapseEl = document.getElementById('myCollapse');
const collapse = bootstrap.Collapse.getOrCreateInstance(collapseEl);
collapse.show();
collapse.hide();
collapse.toggle();

// 监听事件
collapseEl.addEventListener('shown.bs.collapse', () => {
    console.log('面板已展开');
});
collapseEl.addEventListener('hidden.bs.collapse', () => {
    console.log('面板已折叠');
});

Collapse 插件事件：

show.bs.collapse — 展开前触发
shown.bs.collapse — 展开后触发
hide.bs.collapse — 折叠前触发
hidden.bs.collapse — 折叠后触发