Bootstrap 5 手风琴 - HTML

简介

Bootstrap 5 是一种设计漂亮、易于使用的前端框架，它提供了众多可靠的组件来帮助您构建响应式网站。手风琴是其中一个常用的组件，可以帮助您创建非常漂亮的折叠式导航菜单。在本篇文章中，我们将介绍如何使用 Bootstrap 5 来创建一个手风琴菜单。

准备工作

在使用 Bootstrap 5 的手风琴之前，您需要先准备好以下文件：

• jquery.js
• bootstrap.min.css
• bootstrap.bundle.min.js

您可以通过以下方式从官网中下载这些文件：

<!--引入jquery-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--引入bootstrap css-->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
<!--引入bootstrap js-->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>

创建手风琴

下面是一个简单的手风琴，我们将使用这个手风琴来展示如何创建一个 Bootstrap 5 的手风琴菜单：

<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="true" aria-controls="collapseOne">
        Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan sem eget lacinia pulvinar.
      </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">
        Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan sem eget lacinia pulvinar.
      </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">
        Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan sem eget lacinia pulvinar.
      </div>
    </div>
  </div>
</div>

解读代码

代码中最外层的 div 标签具有 accordion 的 class 属性，这表示它是一个手风琴菜单。手风琴菜单中的每个选项都由一个 accordion-item 标记包裹，并且它包含了一个标题，即 accordion-header，以及一个折叠的内容，即 accordion-collapse。标题和折叠内容之间的切换中使用的按钮在标题中定义，并应具有 accordion-button 的 class。

在按钮上，我们定义了以下属性：

• data-bs-toggle="collapse"：指定通知 bootstrap 折叠的内置行为。
• data-bs-target="#collapseOne"：指定应用折叠行为的目标元素的选择器。
• aria-expanded="true"：指定折叠区域是否已展开。

在折叠过程中，Bootstrap 5 根据内容的状态对元素的 class 进行切换。如果折叠区域已展开，则使用 show 和 aria-expanded="true" 样式，否则使用 collapse 和 aria-expanded="false"。

还有一点需要注意的是，我们要使用 data-bs-parent="#accordionExample" 引用手风琴本身，以确保在单个时间中只有一个折叠区域处于展开状态。

总结

手风琴是一个非常实用的组件，可以帮助您构建精美的响应式代码。在本篇文章中，我们介绍了 Bootstrap 5 的手风琴组件，并提供了一个简单的代码示例。通过此示例，您可以了解如何使用 Bootstrap 5 构建优雅的手风琴菜单，并创建自己的非常漂亮的折叠式导航菜单。