下拉菜单 - 光年(Light Year Admin V5)后台管理系统模板

下拉菜单

使用 Bootstrap 下拉插件切换上下文覆盖以显示链接列表等。

概述

下拉菜单是可切换的上下文覆盖，用于显示链接列表等。它们与包含的 Bootstrap 下拉 JavaScript 插件交互。它们是通过单击而不是悬停来切换的；这是有意的设计决策。

下拉菜单基于第三方库 Popper 构建，该库提供动态定位和视口检测。请务必包含 popper.min.js 在 Bootstrap 的 JavaScript 之前或使用包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js。尽管不需要动态定位，但 Popper 不习惯在导航栏中定位下拉菜单。

可访问性

WAI ARIA 标准定义了一个实际的 role="menu" 小部件，但这是特定于触发动作或功能的类似应用程序的菜单。 ARIA 菜单只能包含菜单项、复选框菜单项、单选按钮菜单项、单选按钮组和子菜单。

另一方面，Bootstrap 的下拉菜单被设计为通用的，适用于各种情况和标记结构。例如，可以创建包含其他输入和表单控件的下拉菜单，例如搜索字段或登录表单。因此，Bootstrap 不期望（也不会自动添加）真正 ARIA 所需的任何 role 和 aria- 属性菜单。作者必须自己包含这些更具体的属性。

但是，Bootstrap 确实为大多数标准键盘菜单交互添加了内置支持，例如使用光标键移动单个 .dropdown-item 元素并使用 ESC 关闭菜单的功能 键。

示例

在 .dropdown 或另一个声明 position: relative; 的元素中包装下拉菜单的切换（您的按钮或链接）和下拉菜单。下拉菜单可以从 <a> 或 <button> 元素触发，以更好地满足您的潜在需求。此处显示的示例在适当的情况下使用语义 <ul> 元素，但支持自定义标记。

单个按钮

任何单个 .btn 都可以通过一些标记更改变成下拉切换。以下是如何让它们与 <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="#">美人鱼</a></li>
          <li><a class="dropdown-item" href="#">窃爱</a></li>
          <li><a class="dropdown-item" href="#">手写的从前</a></li>
        </ul>
      </div>

并使用 <a> 元素：

<div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
          哎哟,不错哦
        </a>

        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <li><a class="dropdown-item" href="#">算什么男人</a></li>
          <li><a class="dropdown-item" href="#">天涯过客</a></li>
          <li><a class="dropdown-item" href="#">听爸爸的话</a></li>
        </ul>
      </div>

最好的部分是您也可以使用任何按钮变体来执行此操作：

<!-- 单个按钮 danger 示例 -->
      <div class="btn-group">
        <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">魔杰座</button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">稻香</a></li>
          <li><a class="dropdown-item" href="#">给我一首歌的时间</a></li>
          <li><a class="dropdown-item" href="#">花海</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">兰亭序</a></li>
        </ul>
      </div>

分裂式按钮

同样，使用与单个按钮下拉菜单几乎相同的标记创建拆分按钮下拉菜单，但添加 .dropdown-toggle-split 以在下拉插入符号周围保持适当间距。

我们使用这个额外的类将插入符号两侧的水平 padding 减少 25%，并删除为常规按钮下拉添加的 margin-left。这些额外的更改使插入符号保持在拆分按钮的中心，并在主按钮旁边提供了一个更合适大小的点击区域。

<!-- 分裂式 danger 按钮示例 -->
      <div class="btn-group">
        <button type="button" class="btn btn-danger">七里香</button>
        <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">切换下拉</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">搁浅</a></li>
          <li><a class="dropdown-item" href="#">将军</a></li>
          <li><a class="dropdown-item" href="#">借口</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">困兽之斗</a></li>
        </ul>
      </div>

尺寸

按钮下拉菜单适用于所有大小的按钮，包括默认和拆分下拉按钮。

<div class="btn-group">
        <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          七里香
        </button>
        <ul class="dropdown-menu">
          ...
        </ul>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-lg btn-secondary">十二新作</button>
        <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">切换下拉</span>
        </button>
        <ul class="dropdown-menu">
          ...
        </ul>
      </div>

<div class="btn-group">
        <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          十二新作
        </button>
        <ul class="dropdown-menu">
          ...
        </ul>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-sm btn-secondary">十一月的萧邦</button>
        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">切换下拉</span>
        </button>
        <ul class="dropdown-menu">
          ...
        </ul>
      </div>

深色下拉菜单

通过将 .dropdown-menu-dark 添加到现有的 .dropdown-menu 来选择较暗的下拉菜单以匹配深色导航栏或自定义样式。下拉项目不需要更改。

<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-dark" aria-labelledby="dropdownMenuButton2">
          <li><a class="dropdown-item active" href="#">浪漫手机</a></li>
          <li><a class="dropdown-item" href="#">麦芽糖</a></li>
          <li><a class="dropdown-item" href="#">逆鳞</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">飘移</a></li>
        </ul>
      </div>

并将其用于导航栏：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">导航栏</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
            <ul class="navbar-nav">
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  编程语言
                </a>
                <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
                  <li><a class="dropdown-item" href="#">PHP</a></li>
                  <li><a class="dropdown-item" href="#">Python</a></li>
                  <li><a class="dropdown-item" href="#">Java</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>

方向

RTL

在 RTL 中使用 Bootstrap 时方向是镜像的，这意味着 .dropstart 将出现在右侧。

Dropup

通过将 .dropup 添加到父元素来触发向上的下拉菜单。

<div class="btn-group dropup">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          十一月的萧邦
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">四面楚歌</a></li>
          <li><a class="dropdown-item" href="#">夜曲</a></li>
          <li><a class="dropdown-item" href="#">一路向北</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">珊瑚海</a></li>
        </ul>
      </div>
      <div class="btn-group dropup">
        <button type="button" class="btn btn-secondary">
          十二新作
        </button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">切换下拉</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">四季列车</a></li>
          <li><a class="dropdown-item" href="#">乌克丽丽</a></li>
          <li><a class="dropdown-item" href="#">比较大的大提琴</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">傻笑</a></li>
        </ul>
      </div>

Dropend

通过将 .dropend 添加到父元素来触发元素右侧的下拉菜单。

<div class="btn-group dropend">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          我很忙
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">彩虹</a></li>
          <li><a class="dropdown-item" href="#">扯</a></li>
          <li><a class="dropdown-item" href="#">牛仔很忙</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">蒲公英的约定</a></li>
        </ul>
      </div>
      <div class="btn-group dropend">
        <button type="button" class="btn btn-secondary">
          叶惠美
        </button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">切换下拉端</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">爱情悬崖</a></li>
          <li><a class="dropdown-item" href="#">东风破</a></li>
          <li><a class="dropdown-item" href="#">你听得到</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">懦夫</a></li>
        </ul>
      </div>

Dropstart

通过将 .dropstart 添加到父元素来触发元素左侧的下拉菜单。

<div class="btn-group dropstart">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          叶惠美
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">晴天</a></li>
          <li><a class="dropdown-item" href="#">三年二班</a></li>
          <li><a class="dropdown-item" href="#">双刀</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">她的睫毛</a></li>
        </ul>
      </div>
      <div class="btn-group">
        <div class="btn-group dropstart" role="group">
          <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">切换下拉</span>
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">我不配</a></li>
            <li><a class="dropdown-item" href="#">无双</a></li>
            <li><a class="dropdown-item" href="#">阳光宅男</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">最长的电影</a></li>
          </ul>
        </div>
        <button type="button" class="btn btn-secondary">
          我很忙
        </button>
      </div>

菜单项

您可以使用 <a> 或 <button> 元素作为下拉项。

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
          叶惠美
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
          <li><button class="dropdown-item" type="button">梯田</button></li>
          <li><button class="dropdown-item" type="button">同一种调调</button></li>
          <li><button class="dropdown-item" type="button">以父之名</button></li>
        </ul>
      </div>

您还可以使用 .dropdown-item-text 创建非交互式下拉项。随意使用自定义 CSS 或文本实用程序进一步设置样式。

<ul class="dropdown-menu">
        <li><span class="dropdown-item-text">轨迹</span></li>
        <li><a class="dropdown-item" href="#">霍元甲</a></li>
        <li><a class="dropdown-item" href="#">断了的弦</a></li>
        <li><a class="dropdown-item" href="#">黄金甲</a></li>
      </ul>

Active

将 .active 添加到下拉列表中的项目以将它们设置为活动状态。要将活动状态传达给辅助技术，请使用 aria-current 属性 — 对当前页面使用 page 值，或对当前页面使用 true 集合中的当前项目。

<ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">白色风车</a></li>
        <li><a class="dropdown-item active" href="#" aria-current="true">本草纲目</a></li>
        <li><a class="dropdown-item" href="#">红模仿</a></li>
      </ul>

禁用的

将 .disabled 添加到下拉列表中的项目以将它们设置为禁用。

<ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">菊花台</a></li>
        <li><a class="dropdown-item disabled">迷迭香</a></li>
        <li><a class="dropdown-item" href="#">听妈妈的话</a></li>
      </ul>

菜单对齐

默认情况下，下拉菜单会自动 100% 定位在其父级的顶部和左侧。您可以使用定向 .drop* 类来更改它，但您也可以使用其他修饰符类来控制它们。

将 .dropdown-menu-end 添加到 .dropdown-menu 以右对齐下拉菜单。在 RTL 中使用 Bootstrap 时方向是镜像的，这意味着 .dropdown-menu-end 将出现在左侧。

注意！ 下拉菜单的位置要归功于 Popper，除非它们包含在导航栏中。

<div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          右对齐菜单示例
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><button class="dropdown-item" type="button">侠骨丹心</button></li>
          <li><button class="dropdown-item" type="button">草莽龙蛇传</button></li>
          <li><button class="dropdown-item" type="button">龙虎斗京华</button></li>
        </ul>
      </div>

响应式对齐

如果您想使用响应式对齐，请通过添加 data-bs-display="static" 属性禁用动态定位并使用响应式变体类。

要将下拉菜单右与给定断点或更大的断点对齐，请添加 .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end 。

<div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
          大屏时左对齐但右对齐
        </button>
        <ul class="dropdown-menu dropdown-menu-lg-end">
          <li><button class="dropdown-item" type="button">幻剑灵旗</button></li>
          <li><button class="dropdown-item" type="button">剑网尘丝</button></li>
          <li><button class="dropdown-item" type="button">绝塞传烽录</button></li>
        </ul>
      </div>

要将下拉菜单 left 与给定断点或更大的断点对齐，请添加 .dropdown-menu-end 和 .dropdown-menu{-sm|-md|- lg|-xl|-xxl}-start。

<div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
          大屏幕时右对齐但左对齐
        </button>
        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
          <li><button class="dropdown-item" type="button">弹指惊雷</button></li>
          <li><button class="dropdown-item" type="button">牧野流星</button></li>
          <li><button class="dropdown-item" type="button">游剑江湖</button></li>
        </ul>
      </div>

请注意，您不需要在导航栏中的下拉按钮中添加 data-bs-display=”static" 属性，因为导航栏中不使用 Popper。

对齐选项

采用上面显示的大部分选项，这里有一个小型厨房水槽演示，在一个地方展示了各种下拉对齐选项。

<div class="btn-group">
        <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="#">白发魔女传</a></li>
          <li><a class="dropdown-item" href="#">武当一剑</a></li>
          <li><a class="dropdown-item" href="#">还剑奇情录</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          右对齐菜单
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">萍踪侠影录</a></li>
          <li><a class="dropdown-item" href="#">散花女侠</a></li>
          <li><a class="dropdown-item" href="#">联剑风云录</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
          左对齐，lg 右对齐
        </button>
        <ul class="dropdown-menu dropdown-menu-lg-end">
          <li><a class="dropdown-item" href="#">广陵剑</a></li>
          <li><a class="dropdown-item" href="#">龙凤宝钗缘</a></li>
          <li><a class="dropdown-item" href="#">大唐游侠传</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
          右对齐，lg 左对齐
        </button>
        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
          <li><a class="dropdown-item" href="#">慧剑心魔</a></li>
          <li><a class="dropdown-item" href="#">女帝奇英传</a></li>
          <li><a class="dropdown-item" href="#">武林天骄</a></li>
        </ul>
      </div>

      <div class="btn-group dropstart">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropstart
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">瀚海雄风</a></li>
          <li><a class="dropdown-item" href="#">飞凤潜龙</a></li>
          <li><a class="dropdown-item" href="#">鸣镝风云录</a></li>
        </ul>
      </div>

      <div class="btn-group dropend">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropend
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">狂侠天骄魔女</a></li>
          <li><a class="dropdown-item" href="#">风云雷电</a></li>
          <li><a class="dropdown-item" href="#">武林三绝</a></li>
        </ul>
      </div>

      <div class="btn-group dropup">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropup
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">柳湖侠隐</a></li>
          <li><a class="dropdown-item" href="#">龙山四友</a></li>
          <li><a class="dropdown-item" href="#">蛮荒侠隐</a></li>
        </ul>
      </div>

菜单内容

Headers

添加标题以标记任何下拉菜单中的操作部分。

<ul class="dropdown-menu">
        <li><h6 class="dropdown-header">下拉菜单标题</h6></li>
        <li><a class="dropdown-item" href="#">女侠夜明珠</a></li>
        <li><a class="dropdown-item" href="#">青城十九侠</a></li>
      </ul>

分隔线

用分隔线分隔相关菜单项组。

<ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">青门十四侠</a></li>
        <li><a class="dropdown-item" href="#">拳王</a></li>
        <li><a class="dropdown-item" href="#">天山飞侠</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">铁笛子</a></li>
      </ul>

文本

将任何自由格式的文本放在带有文本的下拉菜单中，并使用间距实用程序。请注意，我可能需要额外的尺寸样式来限制菜单宽度。

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
        <p>
          以汤川学作为主角，该书里面有本格的推理，又有社会派的反思。
        </p>
        <p class="mb-0">
          伽利略的苦恼
        </p>
      </div>

表单

将表单放在下拉菜单中，或将其放入下拉菜单，然后使用 margin 或 padding 实用程序为其提供所需的负空间。

<div class="dropdown-menu">
        <form class="px-4 py-3">
          <div class="mb-3">
            <label for="exampleDropdownFormEmail1" class="form-label">邮箱地址</label>
            <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
          </div>
          <div class="mb-3">
            <label for="exampleDropdownFormPassword1" class="form-label">密码</label>
            <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="密码">
          </div>
          <div class="mb-3">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="dropdownCheck">
              <label class="form-check-label" for="dropdownCheck">
                记住我
              </label>
            </div>
          </div>
          <button type="submit" class="btn btn-primary">登录</button>
        </form>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">新用户？ 点击注册</a>
        <a class="dropdown-item" href="#">忘记密码？</a>
      </div>

<form class="dropdown-menu p-4">
        <div class="mb-3">
          <label for="exampleDropdownFormEmail2" class="form-label">邮箱地址</label>
          <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
        </div>
        <div class="mb-3">
          <label for="exampleDropdownFormPassword2" class="form-label">密码</label>
          <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="密码">
        </div>
        <div class="mb-3">
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="dropdownCheck2">
            <label class="form-check-label" for="dropdownCheck2">
              记住我
            </label>
          </div>
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
      </form>

下拉选项

使用 data-bs-offset 或 data-bs-reference 更改下拉菜单的位置。

<div class="d-flex">
        <div class="dropdown me-1">
          <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
            Offset
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
            <li><a class="dropdown-item" href="#">万里孤侠</a></li>
            <li><a class="dropdown-item" href="#">卧龙峡风云</a></li>
            <li><a class="dropdown-item" href="#">武当七女</a></li>
          </ul>
        </div>

        <div class="btn-group">
          <button type="button" class="btn btn-secondary">Reference</button>
          <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
            <span class="visually-hidden">切换下拉</span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
            <li><a class="dropdown-item" href="#">武当异人传</a></li>
            <li><a class="dropdown-item" href="#">侠丐木尊者</a></li>
            <li><a class="dropdown-item" href="#">翼人影无双</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">云海争奇记</a></li>
          </ul>
        </div>
      </div>

自动关闭行为

默认情况下，在下拉菜单内部或外部单击时，下拉菜单会关闭。您可以使用 autoClose 选项来更改下拉菜单的这种行为。

<div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
          默认下拉菜单
        </button>
        <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
          <li><a class="dropdown-item" href="#">征轮侠影</a></li>
          <li><a class="dropdown-item" href="#">蜀山剑侠后传</a></li>
          <li><a class="dropdown-item" href="#">蜀山剑侠新传</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
          外部可点击
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
          <li><a class="dropdown-item" href="#">蜀山剑侠传</a></li>
          <li><a class="dropdown-item" href="#">创世纪</a></li>
          <li><a class="dropdown-item" href="#">云梦城之谜</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
          内部可点击
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
          <li><a class="dropdown-item" href="#">灵琴杀手</a></li>
          <li><a class="dropdown-item" href="#">封神记</a></li>
          <li><a class="dropdown-item" href="#">龙神</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
          手动关闭
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
          <li><a class="dropdown-item" href="#">时空浪族</a></li>
          <li><a class="dropdown-item" href="#">超级战士</a></li>
          <li><a class="dropdown-item" href="#">凌渡宇</a></li>
        </ul>
      </div>

用法

通过数据属性或 JavaScript，下拉插件通过切换父 .dropdown-menu 上的 .show 类来切换隐藏内容（下拉菜单）。 data-bs-toggle="dropdown" 属性用于在应用程序级别关闭下拉菜单，因此最好始终使用它。

在支持触摸的设备上，打开下拉菜单会将空的 mouseover 处理程序添加到 <body> 元素的直接子元素。这个公认的丑陋黑客对于解决 iOS 事件委托中的怪癖是必要的，它否则会阻止在下拉列表之外的任何地方点击触发关闭下拉列表的代码。关闭下拉菜单后，这些额外的空 mouseover 处理程序将被删除。

通过数据属性

将 data-bs-toggle="dropdown" 添加到链接或按钮以切换下拉菜单。

<div class="dropdown">
        <button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          下拉触发器
        </button>
        <ul class="dropdown-menu" aria-labelledby="dLabel">
          ...
        </ul>
      </div>

通过 JavaScript

通过 JavaScript 调用下拉菜单：

var dropdownElementList = Array.prototype.slice.call(document.querySelectorAll('.dropdown-toggle'))
      var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
        return new bootstrap.Dropdown(dropdownToggleEl)
      })

data-bs-toggle="dropdown" 仍然需要

无论您是通过 JavaScript 调用下拉菜单还是使用 data-api，data-bs-toggle=“dropdown” 始终需要出现在下拉菜单的触发元素上。

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-bs-，如 data-bs-offset=""。通过数据属性传递选项时，请确保将选项名称的大小写类型从 camelCase 更改为 kebab-case。例如，不要使用 data-bs-autoClose="false"，而是使用 data-bs-auto-close="false"。

名称	类型	默认	描述
`boundary`	string \| element	`'clippingParents'`	下拉菜单的溢出约束边界（仅适用于 Popper 的 preventOverflow 修饰符）。默认情况下它是 `'clippingParents'` 并且可以接受 HTMLElement 引用（仅通过 JavaScript）。有关详细信息，请参阅 Popper 的 detectOverflow 文档。
`reference`	string \| element \| object	`'toggle'`	下拉菜单的引用元素。接受 `'toggle'`、`'parent'`、HTMLElement 引用或提供 `getBoundingClientRect` 的对象的值。有关详细信息，请参阅 Popper 的构造函数文档和虚拟元素文档。
`display`	string	`'dynamic'`	默认情况下，我们使用 Popper 进行动态定位。使用 `static` 禁用它。
`offset`	array \| string \| function	`[0, 2]`	下拉菜单相对于其目标的偏移量。您可以使用逗号分隔值在数据属性中传递字符串，例如：`data-bs-offset="10,20"` W当一个函数用于确定偏移量时，它会使用一个包含 popper 放置、引用和 popper rects 作为其第一个参数的对象来调用。触发元素 DOM 节点作为第二个参数传递。该函数必须返回一个包含两个数字的数组：`[skidding, < a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1" target="_blank">距离]`。有关详细信息，请参阅 Popper 的偏移文档。
`autoClose`	boolean \| string	`true`	配置下拉菜单的自动关闭行为： `true` - 单击下拉菜单外部或内部将关闭下拉菜单。 `false` - 单击切换按钮并手动调用 `hide` 或 `toggle` 方法将关闭下拉菜单。（也不会按`esc`键关闭） `'inside'` - 通过单击下拉菜单内部，将（仅）关闭下拉菜单。 `'outside'` - 下拉菜单将（仅）通过单击下拉菜单外部关闭。
`popperConfig`	null \| object \| function	`null`	要更改 Bootstrap 的默认 Popper 配置，请参阅 Popper 的配置。当一个函数用于创建 Popper 配置时，它会使用一个包含 Bootstrap 的默认 Popper 配置的对象来调用。它可以帮助您使用默认设置并将其与您自己的配置合并。该函数必须为 Popper 返回一个配置对象。

使用带有 popperConfig 的函数

var dropdown = new bootstrap.Dropdown(element, {
        popperConfig: function (defaultBsPopperConfig) {
          // var newPopperConfig = {...}
          // use defaultBsPopperConfig if needed...
          // return newPopperConfig
        }
      })

方法

Method	Description
`toggle`	切换给定导航栏或选项卡式导航的下拉菜单。
`show`	显示给定导航栏或选项卡式导航的下拉菜单。
`hide`	隐藏给定导航栏或选项卡式导航的下拉菜单。
`update`	更新元素下拉列表的位置。
`dispose`	销毁元素的下拉列表。（删除 DOM 元素上存储的数据）
`getInstance`	允许您获取与 DOM 元素关联的下拉实例的静态方法，您可以像这样使用它：`bootstrap.Dropdown.getInstance(element)`
`getOrCreateInstance`	静态方法，它返回与 DOM 元素关联的下拉实例，或者在未初始化的情况下创建一个新实例。你可以像这样使用它：`bootstrap.Dropdown.getOrCreateInstance(element)`

事件

所有下拉事件都在切换元素上触发，然后冒泡。所以你也可以在 .dropdown-menu’s 的父元素上添加事件监听器。 hide.bs.dropdown 和 hidden.bs.dropdown 事件具有 clickEvent 属性（仅当原始事件类型为 click)，其中包含单击事件的事件对象。

方法	描述
`show.bs.dropdown`	调用 show 实例方法时立即触发。
`shown.bs.dropdown`	当下拉菜单对用户可见并且 CSS 转换完成时触发。
`hide.bs.dropdown`	调用 hide 实例方法时立即触发。
`hidden.bs.dropdown`	当下拉菜单完成对用户隐藏并且 CSS 转换完成时触发。

var myDropdown = document.getElementById('myDropdown')
      myDropdown.addEventListener('show.bs.dropdown', function () {
        // do something...
      })