bootstrap专栏 06.组件 08.手风琴_前端监听和防抖事件影响了手风琴的accordion事件-优快云博客

本文介绍如何使用HTML和CSS创建一个可交互的手风琴式卡片组件，通过`data-toggle`和`collapse`属性，展示和隐藏面板内容。适合初学者理解响应式布局与JavaScript交互的结合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

# 08.手风琴

[toc]{type: "ol", level: [3]}

```html
<div class="accordion" id="accordionExample">
    <!--卡片1-->
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Collapsible Group Item #1
                </button>
            </h2>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the
                <code>.show</code> class.
            </div>
        </div>
    </div>
    <!--卡片2-->
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse"
                        data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Collapsible Group Item #2
                </button>
            </h2>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
            <div class="card-body">
                Some placeholder content for the second accordion panel. This panel is hidden by default.
            </div>
        </div>
    </div>
    <!--卡片3-->
    <div class="card">
        <div class="card-header" id="headingThree">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse"
                        data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Collapsible Group Item #3
                </button>
            </h2>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
            <div class="card-body">
                And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by
                default.
            </div>
        </div>
    </div>
</div>
```
![手风琴-手风琴-1](08.手风琴-手风琴-1.png)
![手风琴-手风琴-2](08.手风琴-手风琴-2.png)