Bootstrap折叠面板怎么用？解决全部展开问题

珍惜时间，勤奋学习！今天给大家带来《Bootstrap折叠面板正确用法：解决全部展开问题》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

本文旨在解决 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 代码示例如下：

<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折叠面板怎么用？解决全部展开问题》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！