下拉菜单
使用 Bootstrap 下拉插件切换用于显示链接列表等的上下文覆盖层。
概览
下拉菜单是可切换的、上下文相关的覆盖层，用于显示链接列表及更多内容。通过包含的 Bootstrap 下拉菜单 JavaScript 插件，它们变得可交互。它们通过点击切换，而不是通过悬停；这是一个有意的设计决定。
下拉菜单是基于第三方库 Popper 构建的，该库提供动态定位和视口检测。请确保在 Bootstrap 的 JavaScript 之前引入 popper.min.js，或使用包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js。不过，在导航栏中，Popper 并不用于定位下拉菜单，因为不需要动态定位。
无障碍访问
WAI ARIA 标准定义了一个实际的 role="menu" 小部件，但这仅适用于触发操作或功能的类似应用程序的菜单。ARIA 菜单只能包含菜单项、复选菜单项、单选按钮菜单项、单选按钮组和子菜单。
另一方面，Bootstrap 的下拉菜单被设计为通用的，可适用于各种情况和标记结构。例如，可以创建包含额外输入和表单控件的下拉菜单，例如搜索字段或登录表单。因此，Bootstrap 不期望（也不会自动添加）任何 role 和 aria- 真正所需的属性 咏叹调 菜单。作者将必须自己包含这些更具体的属性。
然而，Bootstrap 确实为大多数标准键盘菜单交互添加了内置支持，例如使用光标键在各个 .dropdown-item 元素之间移动，以及使用 Esc 键关闭菜单的功能。
示例
将下拉菜单的切换按钮（你的按钮或链接）和下拉菜单本身包裹在.dropdown中，或其他声明position: relative;的元素中。理想情况下，你应该使用<button>元素作为下拉触发器，但该插件也可以用于<a>元素。这里展示的示例在适当位置使用了语义化的<ul>元素，但也支持自定义标记。
单按钮
任何单个.btn都可以通过一些标记修改变成下拉切换。以下是如何将它们与<button>元素一起使用的方法：
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<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>虽然 <button> 是下拉菜单切换的推荐控件，但在某些情况下你可能不得不使用 <a> 元素。如果使用，我们建议添加 role="button" 属性，以便向屏幕阅读器等辅助技术适当地传达控件的用途。
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<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>
最棒的是，你也可以用任何按钮变体来做到这一点：
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Danger
</button>
<ul class="dropdown-menu">
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
分割按钮
同样，创建拆分按钮下拉菜单，其标记几乎与单按钮下拉菜单相同，只需添加.dropdown-toggle-split以在下拉箭头周围获得适当的间距。
我们使用这个额外的类来将插入符号两侧的水平padding减少25%，并移除为常规按钮下拉菜单添加的margin-left。这些额外的更改可以保持分割按钮中插入符号的居中，并在主按钮旁提供一个更合适大小的点击区域。
<!-- Example split danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">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">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
尺寸
按钮下拉菜单适用于各种尺寸的按钮，包括默认按钮和拆分下拉按钮。
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-lg" type="button">
Large split button
</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">Toggle Dropdown</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">
Small button
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm" type="button">
Small split button
</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">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
深色下拉菜单
在 v5.3.0 中弃用通过添加选项来选择更暗的下拉菜单，以匹配深色导航栏或自定义样式 .dropdown-menu-dark 到现有的上面 .dropdown-menu. 下拉列表项无需更改。
注意！ 随着颜色模式的引入，组件的深色变体在 v5.3.0 中已被弃用。不要添加 .dropdown-menu-dark，请在根元素、父包装元素或组件本身上设置 data-bs-theme="dark"。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item active" 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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>并将其用于导航栏：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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">
<button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<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>
</div>
</nav>方向
在从右到左模式下，方向会被翻转。 因此，.dropstart 将出现在右侧。
居中
将下拉菜单居中显示在切换按钮下方，父元素上有 .dropdown-center。
<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action two</a></li>
<li><a class="dropdown-item" href="#">Action three</a></li>
</ul>
</div>向上弹出
通过在父元素中添加 .dropup 来触发元素上方的下拉菜单。
<!-- Default dropup button -->
<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">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
向上弹出菜单居中
使下拉菜单在切换按钮上方居中，并在父元素上使用.dropup-center。
<div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropup
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action two</a></li>
<li><a class="dropdown-item" href="#">Action three</a></li>
</ul>
</div>向下展开
通过在父元素中添加 .dropend 来触发元素右侧的下拉菜单。
<!-- Default dropend button -->
<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">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary">
Split dropend
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropend</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
下拉开始
通过向父元素添加.dropstart来触发元素左侧的下拉菜单。
<!-- Default dropstart button -->
<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">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropstart</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>
菜单项
你可以使用 <a> 或 <button> 元素作为下拉项。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>你也可以使用 .dropdown-item-text 创建非交互式下拉菜单项。可以随意用自定义 CSS 或文本工具进行进一步样式设计。
<ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<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>活跃
在下拉菜单中的项中添加 .active 来 将它们样式化为活动状态。要将活动状态传达给辅助技术，请使用 aria-current 属性——对当前页面使用 page 值，或对集合中的当前项使用 true 值。
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>禁用
在下拉菜单中的项目添加 .disabled 以 将其样式设为禁用。
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>菜单对齐
默认情况下，下拉菜单会自动定位在其父元素顶部的100%处，并沿左侧排列。你可以使用方向性.drop*类来更改此设置，但你也可以通过额外的修饰类进行控制。
添加 .dropdown-menu-end 到一个 .dropdown-menu 将下拉菜单右对齐。在使用 Bootstrap 的 RTL 模式时，方向会被镜像，这意味着 .dropdown-menu-end 将出现在左侧。
注意！ 下拉菜单的定位依靠 Popper，除非它们位于导航栏中。
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu example
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</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">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>要使下拉菜单在指定的断点或更大屏幕上 左对齐，请添加 .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">
Right-aligned but left aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>请注意，你不需要在导航栏的下拉按钮中添加 data-bs-display="static" 属性，因为导航栏中没有使用 Popper。
对齐选项
采用上面显示的大部分选项，这里有一个小型的综合演示，展示各种下拉菜单对齐选项的效果。
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</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">
Left-aligned, right-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</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">
Right-aligned, left-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</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="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</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="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</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="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
菜单内容
标题
在任何下拉菜单中添加标题以标记操作部分。
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>分隔线
用分隔线将相关的菜单项分组。
<ul class="dropdown-menu">
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>文本
将任何自由格式文本放置在带文本的下拉菜单中，并使用间距工具。请注意，你可能需要额外的尺寸样式来限制菜单宽度。
<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
<p>
Some example text that’s free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>表单
将表单放入下拉菜单中，或将其制作为下拉菜单，并使用 边距或内填充工具 来提供所需的负空间。
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</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">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div><div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
Dropdown form
</button>
<form class="dropdown-menu p-4">
<div class="mb-3">
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</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">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>下拉选项
使用 data-bs-offset 或 data-bs-reference 来更改下拉菜单的位置。
<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu">
<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>
<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" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>自动关闭行为
默认情况下，点击下拉菜单内部或外部时，下拉菜单会关闭。你可以使用 autoClose 选项来更改下拉菜单的此行为。
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
CSS
变量
在 v5.2.0 中添加作为 Bootstrap 不断发展的 CSS 变量方法的一部分，dropdown 现在在 .dropdown-menu 上使用本地 CSS 变量，以增强实时自定义功能。CSS 变量的值通过 Sass 设置，因此仍然支持 Sass 自定义。
--#{$prefix}dropdown-zindex: #{$zindex-dropdown};
--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
--#{$prefix}dropdown-color: #{$dropdown-color};
--#{$prefix}dropdown-bg: #{$dropdown-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
--#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
--#{$prefix}dropdown-border-width: #{$dropdown-border-width};
--#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
--#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
--#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
--#{$prefix}dropdown-header-color: #{$dropdown-header-color};
--#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
--#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
下拉项包括至少一个未在 .dropdown 设置的变量。这允许你在 Bootstrap 使用回退值的同时提供一个新值。
--bs-dropdown-item-border-radius
通过 CSS 变量进行的自定义可以在 .dropdown-menu-dark 类上看到，我们在不添加重复 CSS 选择器的情况下覆盖特定值。
--#{$prefix}dropdown-color: #{$dropdown-dark-color};
--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
--#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
Sass 变量
所有下拉菜单的变量：
$dropdown-min-width: 10rem;
$dropdown-padding-x: 0;
$dropdown-padding-y: .5rem;
$dropdown-spacer: .125rem;
$dropdown-font-size: $font-size-base;
$dropdown-color: var(--#{$prefix}body-color);
$dropdown-bg: var(--#{$prefix}body-bg);
$dropdown-border-color: var(--#{$prefix}border-color-translucent);
$dropdown-border-radius: var(--#{$prefix}border-radius);
$dropdown-border-width: var(--#{$prefix}border-width);
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}); // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg: $dropdown-border-color;
$dropdown-divider-margin-y: $spacer * .5;
$dropdown-box-shadow: var(--#{$prefix}box-shadow);
$dropdown-link-color: var(--#{$prefix}body-color);
$dropdown-link-hover-color: $dropdown-link-color;
$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg);
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color);
$dropdown-item-padding-y: $spacer * .25;
$dropdown-item-padding-x: $spacer;
$dropdown-header-color: $gray-600;
$dropdown-header-padding-x: $dropdown-item-padding-x;
$dropdown-header-padding-y: $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable
深色下拉菜单 的变量：
$dropdown-dark-color: $gray-300;
$dropdown-dark-bg: $gray-800;
$dropdown-dark-border-color: $dropdown-border-color;
$dropdown-dark-divider-bg: $dropdown-divider-bg;
$dropdown-dark-box-shadow: null;
$dropdown-dark-link-color: $dropdown-dark-color;
$dropdown-dark-link-hover-color: $white;
$dropdown-dark-link-hover-bg: rgba($white, .15);
$dropdown-dark-link-active-color: $dropdown-link-active-color;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color: $gray-500;
用于指示下拉菜单可交互性的基于 CSS 的插入符号的变量：
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Sass mixin
mixin（Mixins）用于生成基于 CSS 的插入符号，可以在 scss/mixins/_caret.scss 中找到。
@mixin caret-down($width: $caret-width) {
border-top: $width solid;
border-right: $width solid transparent;
border-bottom: 0;
border-left: $width solid transparent;
}
@mixin caret-up($width: $caret-width) {
border-top: 0;
border-right: $width solid transparent;
border-bottom: $width solid;
border-left: $width solid transparent;
}
@mixin caret-end($width: $caret-width) {
border-top: $width solid transparent;
border-right: 0;
border-bottom: $width solid transparent;
border-left: $width solid;
}
@mixin caret-start($width: $caret-width) {
border-top: $width solid transparent;
border-right: $width solid;
border-bottom: $width solid transparent;
}
@mixin caret(
$direction: down,
$width: $caret-width,
$spacing: $caret-spacing,
$vertical-align: $caret-vertical-align
) {
@if $enable-caret {
&::after {
display: inline-block;
margin-left: $spacing;
vertical-align: $vertical-align;
content: "";
@if $direction == down {
@include caret-down($width);
} @else if $direction == up {
@include caret-up($width);
} @else if $direction == end {
@include caret-end($width);
}
}
<span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$direction</span> == start </span><span class="token punctuation">{</span>
<span class="token selector"><span class="token parent important">&</span>::after </span><span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token parent important">&</span>::before </span><span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token variable">$spacing</span><span class="token punctuation">;</span>
<span class="token property">vertical-align</span><span class="token punctuation">:</span> <span class="token variable">$vertical-align</span><span class="token punctuation">;</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
<span class="token keyword">@include</span> <span class="token function">caret-start</span><span class="token punctuation">(</span><span class="token variable">$width</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token parent important">&</span>:empty::after </span><span class="token punctuation">{</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
}
}
用法
通过数据属性或 JavaScript，下拉插件通过切换来切换隐藏内容（下拉菜单） .show 父类上的类 .dropdown-menu. 这个 data-bs-toggle="dropdown" 该属性用于在应用程序级别关闭下拉菜单，因此始终使用它是一个好主意。
在触控设备上，打开下拉菜单会添加空白 mouseover 处理程序到其直接子节点 <body> 元素。这个公认的丑陋的解决方法是为了规避一个问题而必须的 iOS 事件委托中的怪癖，否则会阻止在下拉菜单外的任何地方点击触发关闭下拉菜单的代码。一旦下拉菜单关闭，这些额外的空 mouseover 处理器已被移除。
通过数据属性
在链接或按钮上添加data-bs-toggle="dropdown"以切换下拉菜单。
<div class="dropdown">
<button type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
通过 JavaScript
下拉菜单的触发元素必须有 data-bs-toggle="dropdown"，无论你是通过 JavaScript 调用下拉菜单还是使用 data-api。
通过 JavaScript 调用下拉菜单：
const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
选项
由于选项可以通过数据属性或 JavaScript 传递，你可以将选项名称附加到 data-bs-，就像在 data-bs-animation="{value}" 中一样。确保在通过数据属性传递选项时，将选项名称的大小写类型从“camelCase”更改为“kebab-case”。例如，使用 data-bs-custom-class="beautifier" 而不是 data-bs-customClass="beautifier"。
从 Bootstrap 5.2.0 开始，所有组件都支持一个 实验性的保留数据属性 data-bs-config，它可以用作存放简单组件配置的 JSON 字符串。当一个元素同时拥有 data-bs-config='{"delay":0, "title":123}' 和 data-bs-title="456" 属性时，最终的 title 值将会是 456，且单独的数据属性将覆盖 data-bs-config 上给定的值。此外，现有的数据属性也能够存放如 data-bs-delay='{"show":0,"hide":150}' 的 JSON 值。
最终的配置对象是data-bs-config、data-bs-和js object合并的结果，其中最新提供的键值会覆盖其他键值。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
autoClose | 布尔值，字符串 | true | 配置下拉菜单的自动关闭行为：
|
boundary | 字符串，元素 | 'clippingParents' | 下拉菜单的溢出约束边界（仅适用于 Popper 的 preventOverflow 修饰符）。默认情况下它是 clippingParents 并且可以接受一个 HTMLElement 引用（仅通过 JavaScript）。有关更多信息，请参阅 Popper 的 detectOverflow 文档. |
display | string | 'dynamic' | 默认情况下，我们使用 Popper 进行动态定位。使用以下方法禁用此功能 static. |
offset | 数组，字符串，函数 | [0, 2] | 下拉菜单相对于其目标的偏移量。你可以在数据属性中传递带有逗号分隔值的字符串，例如： data-bs-offset="10,20"当使用函数来确定偏移量时，它会以一个包含 popper 位置、参考元素和 popper 矩形的对象作为第一个参数进行调用。触发元素的 DOM 节点作为第二个参数传递。该函数必须返回一个包含两个数字的数组： 打滑, 距离. 有关更多信息，请参阅Popper的著作 补偿文件. |
popperConfig | null，对象，函数 | null | 要更改 Bootstrap 的默认 Popper 配置，请参阅 Popper的配置当使用函数来创建 Popper 配置时，它会被一个包含 Bootstrap 默认 Popper 配置的对象调用。它帮助你使用并合并默认配置与自己的配置。该函数必须返回一个 Popper 的配置对象。 |
reference | 字符串，元素，对象 | 'toggle' | 下拉菜单的参考元素。接受以下值 'toggle', 'parent', 一个 HTMLElement 引用或提供对象 getBoundingClientRect. 有关更多信息，请参阅Popper的著作 构造函数文档 和 虚拟元素文档. |
在 popperConfig 上使用函数
const dropdown = new bootstrap.Dropdown(element, {
popperConfig(defaultBsPopperConfig) {
// const newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
方法
| 方法 | 描述 |
|---|---|
dispose | 销毁元素的下拉菜单。（移除 DOM 元素上存储的数据） |
getInstance | 静态方法，允许你获取与 DOM 元素关联的下拉实例，你可以这样使用它： bootstrap.Dropdown.getInstance(element). |
getOrCreateInstance | 静态方法，返回与 DOM 元素关联的下拉实例，如果尚未初始化则创建一个新的实例。你可以这样使用它： bootstrap.Dropdown.getOrCreateInstance(element). |
hide | 隐藏给定导航栏或标签导航的下拉菜单。 |
show | 显示给定导航栏或标签导航的下拉菜单。 |
toggle | 切换给定导航栏或标签导航的下拉菜单。 |
update | 更新元素下拉菜单的位置。 |
事件
所有下拉事件都会在切换元素上触发，然后向上传播。因此，你也可以在.dropdown-menu的父元素上添加事件监听器。hide.bs.dropdown和hidden.bs.dropdown事件有一个clickEvent属性（仅当原始事件类型为click时），该属性包含点击事件的事件对象。
| 事件类型 | 描述 |
|---|---|
hide.bs.dropdown | 当调用 hide 实例方法时立即触发。 |
hidden.bs.dropdown | 当下拉菜单已完成从用户界面隐藏且 CSS 过渡完成时触发。 |
show.bs.dropdown | 当调用 show 实例方法时立即触发。 |
shown.bs.dropdown | 当下拉菜单已对用户可见且 CSS 过渡完成时触发。 |
const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
// do something...
})