Bootstrap5下拉菜单：点击展开的导航选项列表

在网页开发中，导航菜单是不可或缺的一部分。但当菜单项较多时，直接罗列会占用大量空间，影响页面美观。Bootstrap5的下拉菜单（Dropdown）完美解决了这个问题——它可以将多个选项“折叠”在一个按钮下，点击按钮后才展开列表，既节省空间又保持界面简洁。

一、准备工作：引入Bootstrap5及依赖¶

要使用Bootstrap5的下拉菜单，首先需要引入Bootstrap的CSS和JavaScript文件。注意，Bootstrap5的下拉菜单依赖 Popper.js（用于定位菜单），因此需按顺序引入以下资源：

<!-- 引入Bootstrap5的CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 先引入Popper.js（下拉菜单依赖它定位） -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>

<!-- 再引入Bootstrap5的JavaScript（包含下拉菜单功能） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

二、创建基本下拉菜单¶

下拉菜单的核心结构由三部分组成：容器、触发按钮和选项列表。以下是一个完整的示例：

<div class="dropdown">
  <!-- 触发按钮 -->
  <button class="btn btn-primary dropdown-toggle" 
          type="button" 
          id="dropdownMenuButton" 
          data-bs-toggle="dropdown" 
          aria-expanded="false">
    我的菜单
  </button>

  <!-- 下拉选项列表 -->
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">首页</a></li>
    <li><a class="dropdown-item" href="#">产品</a></li>
    <li><a class="dropdown-item active" href="#">关于我们</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item disabled" href="#" tabindex="-1">联系我们</a></li>
  </ul>
</div>

三、结构解析（初学者必看）¶

容器：
外层用 <div class="dropdown"> 包裹，这是下拉菜单的“根容器”，所有元素必须在这个容器内。
触发按钮：
- class="btn btn-primary dropdown-toggle"：btn 是按钮基础样式，btn-primary 是蓝色主题，dropdown-toggle 是触发下拉的关键类。
- data-bs-toggle="dropdown"：告诉Bootstrap这是一个下拉菜单触发器，点击会展开/收起列表。
- aria-expanded="false"：无障碍属性，初始状态下拉菜单未展开，设为 false；展开后会自动变为 true。
- id="dropdownMenuButton"：与下拉列表关联，用于无障碍访问（可选但推荐）。
选项列表：
- class="dropdown-menu"：下拉列表的容器，默认左对齐，可通过 dropdown-menu-end 设为右对齐。
- 列表项用 <li> 包裹，内部通过 <a class="dropdown-item"> 或 <button class="dropdown-item"> 定义选项。
- active：高亮当前选中项（蓝色背景）。
- disabled：禁用选项（灰色且不可点击，需加 tabindex="-1" 防止键盘访问）。
- dropdown-divider：分割线（用 <hr> 实现，可分隔不同类别的选项）。

四、交互逻辑（无需额外代码）¶

Bootstrap5的下拉菜单已内置交互逻辑，只需按上述结构编写HTML，点击触发按钮即可展开/收起列表。点击菜单项后，下拉菜单会自动关闭（无需手动写JavaScript）。

五、进阶用法：对齐与方向¶

右对齐下拉菜单：在 dropdown-menu 中添加 dropdown-menu-end，菜单会靠右展开：

  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">

向上/向下展开：默认下拉菜单向下展开，若需向上展开（如底部空间不足），可在容器上添加 dropup 类：

  <div class="dropdown dropup"> <!-- 向上展开 -->

六、常见问题解决¶

下拉菜单无法展开？
检查是否引入了Popper.js和Bootstrap的JavaScript，且顺序正确（先Popper，后Bootstrap）：

   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

菜单项样式错乱？
确保所有选项都在 <li> 内，且 <a> 或 <button> 使用 dropdown-item 类。

总结¶

Bootstrap5下拉菜单的核心是：dropdown 容器 + dropdown-toggle 按钮 + dropdown-menu 列表，配合Popper.js和Bootstrap JS实现交互。通过简单的类名（如 active、disabled、dropdown-menu-end），即可快速实现高亮、禁用、对齐等功能，无需复杂代码。掌握这些基础后，你就能轻松构建简洁高效的导航菜单了！