Bootstrap 5下拉菜单

在网页应用程序开发中，下拉菜单是常用的交互组件之一。Bootstrap 5提供了一系列下拉菜单组件，可以方便开发者为网页应用程序添加功能丰富、功能强大的下拉菜单效果。

基础下拉菜单

使用Bootstrap 5实现一个基础下拉菜单很简单，只需要遵循下面的步骤：

1. 在需要添加下拉菜单的元素上添加dropdown类名；
2. 在下拉菜单中添加dropdown-menu类名；
3. 使用<a>标签（或<button>标签）为下拉菜单列添加链接。

下面是一个简单的示例：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    下拉菜单
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">选项 1</a></li>
    <li><a class="dropdown-item" href="#">选项 2</a></li>
    <li><a class="dropdown-item" href="#">选项 3</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">其他</a></li>
  </ul>
</div>

该示例中，<div>元素中的dropdown类名表明该元素为下拉菜单的上方按钮，<button>元素为触发下拉菜单的按钮，添加了dropdown-toggle类名以表明其为下拉菜单触发按钮，<ul>元素中添加了dropdown-menu类名以表明其为下拉菜单列表。

在实际开发中，我们通常会自定义下拉菜单的样式和布局，以更好的满足业务需求。

右对齐的下拉菜单

有些业务场景下需要将下拉菜单的列表内容靠右对齐，这时可以在dropdown-menu类名上添加dropdown-menu-end类名以实现该效果。示例如下：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    右对齐下拉菜单
  </button>
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item" href="#">选项 1</a></li>
    <li><a class="dropdown-item" href="#">选项 2</a></li>
    <li><a class="dropdown-item" href="#">选项 3</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">其他</a></li>
  </ul>
</div>

悬停下拉菜单

在某些交互场景中，需要实现鼠标悬停到某个元素上时下拉菜单自动出现，并离开时自动隐藏的效果，Bootstrap 5提供了hover插件以实现该效果。使用方法很简单，只需要在data-bs-trigger属性中添加hover即可。示例如下：

<div class="dropdown">
  <a href="#" class="dropdown-toggle" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false" data-bs-trigger="hover">
    悬停下拉菜单
  </a>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">选项 1</a></li>
    <li><a class="dropdown-item" href="#">选项 2</a></li>
    <li><a class="dropdown-item" href="#">选项 3</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">其他</a></li>
  </ul>
</div>

虚拟下拉菜单

在某些交互场景中，需要自定义下拉菜单的触发按钮样式或布局，而不是使用默认的<button>或<a>元素，Bootstrap 5提供了dropdown构造函数以实现这一需求。使用方法如下：

1. 初始化下拉菜单，通过new Dropdown()方法创建一个Dropdown对象，该对象中包含了下拉菜单的相关方法和属性；
2. 为下拉菜单触发按钮添加下拉菜单类名dropdown和下拉菜单触发按钮类名dropdown-toggle；
3. 为下拉菜单中的菜单项设置一个唯一的标识符，然后在触发按钮上通过data-bs-target属性引用该标识符。

示例如下：

<div class="dropdown">
  <div class="my-custom-btn dropdown-toggle" type="button" id="dropdown-custom-btn" data-bs-toggle="dropdown" aria-expanded="false">
    自定义下拉菜单
  </div>
  <ul class="dropdown-menu" aria-labelledby="dropdown-custom-btn">
    <li><a class="dropdown-item" href="#" data-bs-target="#item-1">选项 1</a></li>
    <li><a class="dropdown-item" href="#" data-bs-target="#item-2">选项 2</a></li>
    <li><a class="dropdown-item" href="#" data-bs-target="#item-3">选项 3</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#" data-bs-target="#other">其他</a></li>
  </ul>
</div>
<script>
  var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
  var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
    return new bootstrap.Dropdown(dropdownToggleEl)
  })
</script>

综上，Bootstrap 5的下拉菜单组件是非常实用的交互组件之一，开发者可以根据业务需求自定义下拉菜单的样式和布局。