本文旨在解决 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 代码示例如下：
Test accordions
Placeholder text 1Placeholder text 2Placeholder text 3
关键修改说明：
- 唯一的 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 样式可以进一步美化手风琴组件，提升用户体验。
