Bootstrap5 下拉菜单

下拉菜单是前端开发中常见的交互元素，用于显示隐藏的内容或选项。在 Bootstrap 5 中，下拉菜单的实现相对简单且功能强大。

基本使用

Bootstrap 5 提供了丰富的类和属性来创建和控制下拉菜单。首先，你需要一个触发下拉菜单的按钮或链接。

// www.javascriptcn.com code example
<div class="dropdown">
  <button class="btn btn-secondary 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="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

上述代码中，data-bs-toggle="dropdown" 是关键属性，它指示浏览器当点击按钮时应显示下拉菜单。aria-expanded="false" 属性用于无障碍访问，表示当前下拉菜单是否展开。

菜单位置

默认情况下，下拉菜单会出现在触发按钮的下方。但是，你可以通过添加不同的类来改变其位置。

向上展开

// www.javascriptcn.com code example
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonUp" data-bs-toggle="dropdown" aria-expanded="false">
    向上展开
  </button>
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButtonUp">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

在这个例子中，dropdown-menu-up 类使下拉菜单向上展开。

右对齐

// www.javascriptcn.com code example
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonEnd" data-bs-toggle="dropdown" aria-expanded="false">
    右对齐
  </button>
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButtonEnd">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

dropdown-menu-end 类使下拉菜单右对齐。

动态内容

有时你可能需要根据用户的操作动态地更新下拉菜单的内容。可以使用 JavaScript 来实现这一功能。

// www.javascriptcn.com code example
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDynamic" data-bs-toggle="dropdown" aria-expanded="false">
    动态内容
  </button>
  <ul class="dropdown-menu" id="dynamicDropdown" aria-labelledby="dropdownMenuButtonDynamic">
  </ul>
</div>

<script>
document.getElementById('dropdownMenuButtonDynamic').addEventListener('click', function () {
  var dropdown = document.getElementById('dynamicDropdown');
  dropdown.innerHTML = `
    <li><a class="dropdown-item" href="#">动态项 1</a></li>
    <li><a class="dropdown-item" href="#">动态项 2</a></li>
  `;
});
</script>

在上面的例子中，当用户点击触发按钮时，JavaScript 会更新下拉菜单的内容。

禁用项目

你可以将某些下拉菜单项目设置为禁用状态，使其不可点击。

// www.javascriptcn.com code example
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDisabled" data-bs-toggle="dropdown" aria-expanded="false">
    禁用项目
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDisabled">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item disabled" href="#">禁用的选项</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

在上述代码中，disabled 类用于禁用下拉菜单中的特定选项。

导航链接

你可以将下拉菜单用作导航的一部分，例如在一个导航栏中嵌入下拉菜单。

// www.javascriptcn.com code example
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">品牌</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">主页 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">特性</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          下拉菜单
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

这个例子展示了如何将下拉菜单嵌入到导航栏中，并且可以通过点击导航链接来展开或收起下拉菜单。

深色模式

Bootstrap 5 支持深色模式，你可以通过在 <body> 或 <html> 元素上添加 dark 类来启用深色主题。

<body class="bg-dark text-white">
  <!-- 下拉菜单代码 -->
</body>

这样会使整个页面，包括下拉菜单，都采用深色背景和浅色文字。

总结

以上就是关于 Bootstrap 5 下拉菜单的基本使用方法、位置调整、动态内容、禁用项目、导航链接以及深色模式的应用。通过这些技巧，你可以创建出功能丰富、样式美观的下拉菜单组件。