Bootstrap Accordion 组件：避免全部展开及初始状态问题

本文旨在解决 Bootstrap Accordion 组件中常见的两个问题：点击一个 accordion 时所有 accordion 都展开，以及页面加载时 accordion 箭头方向不正确的问题。通过修改 HTML 结构中的 aria-labelledby 和 data-bs-parent 属性，并正确设置 aria-expanded 和 class 属性，可以确保 accordion 组件的正常工作，实现单个展开和折叠的预期效果，并修复初始状态下箭头方向的显示问题。

解决 Bootstrap Accordion 全部展开的问题

在使用 Bootstrap accordion 组件时，一个常见的问题是点击其中一个 accordion 按钮时，所有的 accordion 内容都会同时展开。 这通常是由于所有 accordion item 都使用了相同的 id 和 aria-labelledby 属性造成的。 Bootstrap 的 accordion 组件依赖这些属性来管理各个 accordion item 的展开和折叠状态。

要解决这个问题，需要确保每个 accordion item 都有唯一的 id、aria-labelledby 和 data-bs-target 属性。

示例代码：

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        This is the first item's accordion body.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        This is the second item's accordion body.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        This is the third item's accordion body.
      </div>
    </div>
  </div>
</div>

代码解释：

• id="accordionExample": 这是最外层 accordion 容器的 ID，用于将所有 accordion item 组织在一起。
• id="headingOne", id="headingTwo", id="headingThree": 每个 accordion header 都有唯一的 ID。
• data-bs-target="#collapseOne", data-bs-target="#collapseTwo", data-bs-target="#collapseThree": 每个 button 的 data-bs-target 属性指向对应的 accordion content 的 ID。
• aria-controls="collapseOne", aria-controls="collapseTwo", aria-controls="collapseThree": 定义了按钮控制的可折叠区域的 ID。
• id="collapseOne", id="collapseTwo", id="collapseThree": 每个 accordion content 都有唯一的 ID。
• aria-labelledby="headingOne", aria-labelledby="headingTwo", aria-labelledby="headingThree": 每个 accordion content 的 aria-labelledby 属性指向对应的 header 的 ID。
• data-bs-parent="#accordionExample": 每个 accordion content 的 data-bs-parent 属性指向最外层 accordion 容器的 ID，确保只有一个 accordion item 可以同时展开。

注意事项：

• 确保所有 id 在整个 HTML 文档中是唯一的。
• aria-labelledby 属性的值必须与对应 header 的 id 属性值完全匹配。
• data-bs-target 属性的值必须与对应 content 的 id 属性值完全匹配，并且以 # 开头。

解决初始状态下箭头方向不正确的问题

另一个常见问题是，当页面加载时，即使 accordion item 是折叠的，箭头仍然显示为展开状态。 这是因为 aria-expanded 属性和 accordion-button 的 class 没有正确设置。

要解决这个问题，需要确保初始状态下，所有折叠的 accordion item 的 aria-expanded 属性设置为 "false"，并且 accordion-button 元素包含 collapsed 类。 展开的 accordion item 则需要将 aria-expanded 属性设置为 "true"，并移除 collapsed 类。

AI-Text-Classifier

OpenAI官方出品，可以区分人工智能书写的文本和人类书写的文本

59

查看详情

示例代码（基于上面的代码，添加初始状态的设置）：

在上面的代码中，我们可以看到第二个和第三个 accordion item 的按钮添加了 collapsed 类，并且 aria-expanded 设置为 false。 第一个 accordion item 默认是展开的，所以 aria-expanded 设置为 false，并且没有 collapsed 类。

代码解释：

• aria-expanded="false": 指示 accordion content 初始状态是折叠的。
• class="accordion-button collapsed": collapsed 类指示 accordion 按钮初始状态是折叠的。

注意事项：

• 确保 aria-expanded 属性的值与 accordion item 的实际展开/折叠状态一致。
• 在页面加载时，使用 JavaScript 动态更新 aria-expanded 属性和 collapsed 类，以确保初始状态正确。

总结：

通过为每个 accordion item 分配唯一的 id 和 aria-labelledby 属性，并正确设置 aria-expanded 属性和 collapsed 类，可以解决 Bootstrap accordion 组件中常见的全部展开和初始状态箭头方向不正确的问题。 确保仔细检查 HTML 结构和属性值，以确保 accordion 组件的正常工作。

以上就是Bootstrap Accordion 组件：避免全部展开及初始状态问题的详细内容，更多请关注php中文网其它相关文章！