正确使用 Bootstrap Accordion：避免全部展开的问题-html教程-PHP中文网

正确使用 Bootstrap Accordion：避免全部展开的问题

花韻仙語

发布： 2025-10-01 17:43:02

原创

328人浏览过

正确使用 bootstrap accordion：避免全部展开的问题

本文旨在解决 Bootstrap 手风琴组件中遇到的一个常见问题：点击一个手风琴项时，所有项都会同时展开。通过详细的代码分析和步骤指导，帮助开发者正确配置 aria-labelledby 属性，并确保每个手风琴项都有唯一的ID关联，从而实现手风琴的预期行为，即每次只展开一个项。同时，也会介绍如何解决页面加载时箭头方向不正确的问题，确保手风琴组件在初始状态下呈现正确的视觉效果。

Bootstrap Accordion 组件详解

Bootstrap 的手风琴（Accordion）组件是一种常用的内容组织方式，允许用户通过展开和折叠不同的内容区域来浏览信息。然而，如果配置不当，可能会导致所有手风琴项同时展开，影响用户体验。

问题分析：aria-labelledby 和 id 属性重复

手风琴组件的核心问题在于 aria-labelledby 和 id 属性的使用。在提供的代码中，所有的 accordion-item 都使用了相同的 aria-labelledby="headingOne" 和 id="collapseOne"。这导致 Bootstrap 认为所有按钮都与同一个内容区域关联，因此点击任何一个按钮都会触发所有内容区域的展开。

解决方案：确保唯一性

要解决这个问题，需要确保每个手风琴项的 id 和 aria-labelledby 属性都是唯一的。

HTML 代码修改：

需要为每个 accordion-item、accordion-button 和 accordion-collapse 元素分配唯一的 id。修改后的 HTML 代码示例如下：

FashionLabs

AI服装模特、商品图，可商用，低价提升销量神器

查看详情

<div class="col-12 offset-4 my-5" id="dropdowns">
    <h4 id="data" class="ph">Test accordions</h4>
    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <button style="font-weight: bold; background-color: #f5f5f5;" class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                Test 1
            </button>
            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <div class="accordion-body" style="background-color: #f5f5f5;">
                    Placeholder text 1
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <button style="font-weight: bold; background-color: #f5f5f5;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Test 2
            </button>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                <div class="accordion-body" style="background-color: #f5f5f5;">
                    Placeholder text 2
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <button style="font-weight: bold; background-color: #f5f5f5;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Test 3
            </button>
            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                <div class="accordion-body" style="background-color: #f5f5f5;">
                    Placeholder text 3
                </div>
            </div>
        </div>
    </div>
</div>

登录后复制

关键修改说明：

唯一的 id： 为每个 accordion-collapse 元素分配了唯一的 id（collapseOne、collapseTwo、collapseThree）。
匹配的 aria-labelledby： 每个 accordion-collapse 元素的 aria-labelledby 属性与对应的 accordion-button 的 aria-controls 属性相匹配。
data-bs-parent： 所有手风琴项的 data-bs-parent 属性都指向包含所有手风琴项的父元素 accordion 的 id (这里是 accordionExample)。这对于正确的手风琴行为至关重要。
初始状态控制： 默认情况下，所有手风琴项都应处于折叠状态。通过移除 collapse show 类，并为所有按钮添加 collapsed 类来实现。如果需要默认展开第一个手风琴项，可以保留第一个 accordion-collapse 的 collapse show 类，并移除对应的 accordion-button 的 collapsed 类，同时设置 aria-expanded="true"。

解决初始状态箭头方向错误的问题

更新后的代码通过移除默认的 show 类并添加 collapsed 类确保页面加载时所有手风琴项都是关闭的，并且箭头方向正确。

CSS 代码 (可选)

提供的 CSS 代码主要用于美化手风琴组件，例如修改背景颜色、移除边框和阴影等。这些样式可以根据具体需求进行调整。

.ph {
    font-weight: bold;
}

.accordion-button:focus {
    font-weight: bold;
    box-shadow: none;
    border-color: black;
}

.accordion-button:not(.collapsed) {
    color: black;
    background-color: #f5f5f5;
}

.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active {
    background-color: #f5f5f5;
    color: black;
    text-decoration: none;
    border: hidden;
    border-color: #f5f5f5;
    box-shadow: 0px;
}

.accordion-item {
    border-top: hidden;
    border-left: hidden;
    border-right: hidden;
    border-bottom-color: #d4d4d4;
    border-bottom-style: solid;
    border-bottom-width: 2px;
}

.accordion-button {
    padding-left: 0px;
}

登录后复制

总结

正确配置 Bootstrap 手风琴组件的关键在于确保每个手风琴项的 id 和 aria-labelledby 属性都是唯一的，并且 data-bs-parent 属性指向正确的父元素。通过遵循这些步骤，可以避免所有手风琴项同时展开的问题，并确保组件在初始状态下呈现正确的视觉效果。此外，根据需求自定义 CSS 样式可以进一步美化手风琴组件，提升用户体验。

以上就是正确使用 Bootstrap Accordion：避免全部展开的问题的详细内容，更多请关注php中文网其它相关文章！