在 GitHub 上查看
下拉菜单
使用 Bootstrap 下拉菜单插件，切换上下文叠加层以显示链接列表等内容。
概述
下拉菜单是可切换的上下文叠加层，用于显示链接列表等内容。它们通过包含的 Bootstrap 下拉菜单 JavaScript 插件实现交互性。它们通过单击切换，而不是通过悬停；这是一项 有意的设计决策。
下拉菜单基于第三方库 Popper 构建，它提供动态定位和视口检测。务必在 Bootstrap 的 JavaScript 之前包含 popper.min.js，或使用包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js。不过，Popper 不用于定位导航栏中的下拉菜单，因为不需要动态定位。
如果您从源代码构建我们的 JavaScript，它 需要 util.js。
可访问性
WAI ARIA 标准定义了一个实际的 role="menu" 小组件，但这特定于触发操作或功能的类似应用程序的菜单。ARIA 菜单只能包含菜单项、复选框菜单项、单选按钮菜单项、单选按钮组和子菜单。
另一方面，Bootstrap 的下拉菜单旨在通用，适用于各种情况和标记结构。例如，可以创建包含其他输入和表单控件（例如搜索字段或登录表单）的下拉菜单。因此，Bootstrap 不期望（也不自动添加）真 ARIA 菜单所需的任何 role 和 aria- 属性。作者必须自己包含这些更具体属性。
但是，Bootstrap 确实为大多数标准键盘菜单交互添加了内置支持，例如使用光标键在各个 .dropdown-item 元素之间移动并使用 ESC 键关闭菜单。
示例
将下拉菜单的切换（按钮或链接）和下拉菜单包装在 .dropdown 或声明 position: relative; 的其他元素中。可以从 <a> 或 <button> 元素触发下拉菜单，以更好地满足您的潜在需求。
单个按钮
可以通过一些标记更改将任何单个 .btn 变成下拉菜单切换。以下是如何使用 <button> 元素实现它们
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>以及使用 <a> 元素
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>最棒的是，您也可以对任何按钮变体执行此操作
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
拆分按钮
同样，创建分割按钮下拉菜单与单个按钮下拉菜单的标记几乎相同，但添加了 .dropdown-toggle-split 以便在下拉箭头周围留出适当的间距。
我们使用此额外类将箭头两侧的水平 padding 减少 25%，并移除为常规按钮下拉菜单添加的 margin-left。这些额外更改使箭头居中于分割按钮，并在主按钮旁边提供更适当大小的点击区域。
<!-- Example split danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
尺寸
按钮下拉菜单适用于所有尺寸的按钮，包括默认和分割下拉按钮。
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
...
</div>
</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-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
<!-- Small button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
...
</div>
</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-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
方向
上拉菜单
通过向父元素添加 .dropup 来触发元素上方的下拉菜单。
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</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-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
右拉菜单
通过向父元素添加 .dropright 来触发元素右侧的下拉菜单。
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
左拉菜单
通过向父元素添加 .dropleft 来触发元素左侧的下拉菜单。
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>
菜单项
从历史上看，下拉菜单内容必须是链接，但 v4 不再如此。现在，您可以在下拉菜单中选择性地使用 <button> 元素，而不仅仅是 <a>。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>您还可以使用 .dropdown-item-text 创建非交互式下拉菜单项。随时使用自定义 CSS 或文本实用程序进行进一步的样式设置。
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>激活
将 .active 添加到下拉菜单中的项以将它们样式化为活动。
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>禁用
将 .disabled 添加到下拉菜单中的项以将它们样式化为禁用。
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>菜单对齐
默认情况下，下拉菜单会自动定位到其父元素的顶部和左侧 100% 的位置。将 .dropdown-menu-right 添加到 .dropdown-menu 以右对齐下拉菜单。
注意！ 下拉菜单通过 Popper 定位（除非它们包含在导航栏中）。
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>响应式对齐
如果你想使用响应式对齐，请通过添加 data-display="static" 属性来禁用动态定位，并使用响应式变体类。
要使用给定的断点或更大的断点将下拉菜单向右对齐，请添加 .dropdown-menu{-sm|-md|-lg|-xl}-right。
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-lg-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>要使用给定的断点或更大的断点将下拉菜单向左对齐，请添加 .dropdown-menu-right 和 .dropdown-menu{-sm|-md|-lg|-xl}-left。
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>请注意，你无需为导航栏中的下拉按钮添加 data-display="static" 属性，因为导航栏中未使用 Popper。
菜单内容
标题
在任何下拉菜单中添加一个标题，以标记操作部分。
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>分隔符
使用分隔线分隔相关菜单项组。
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>文本
使用文本和 间距实用程序 在下拉菜单中放置任何自由格式文本。请注意，你可能需要额外的尺寸样式来限制菜单宽度。
<div class="dropdown-menu p-4 text-muted" 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="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-group">
<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><form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group">
<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>下拉菜单选项
使用 data-offset 或 data-reference 更改下拉列表的位置。
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
Offset
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</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-toggle="dropdown" aria-expanded="false" data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>用法
通过数据属性或 JavaScript，下拉列表插件通过在父 .dropdown-menu 上切换 .show 类来切换隐藏内容（下拉列表菜单）。data-toggle="dropdown" 属性在应用程序级别用于关闭下拉列表菜单，因此最好始终使用它。
在支持触控的设备上，打开下拉列表会将空（
$.noop）mouseover 处理程序添加到 <body> 元素的直接子元素。必须使用这种丑陋的技巧来解决 iOS 事件委托中的一个怪癖，否则将阻止在下拉列表外部的任何位置点击触发关闭下拉列表的代码。下拉列表关闭后，将移除这些额外的空 mouseover 处理程序。
通过 data 属性
将 data-toggle="dropdown" 添加到链接或按钮以切换下拉列表。
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
通过 JavaScript
通过 JavaScript 调用下拉列表
$('.dropdown-toggle').dropdown()
仍然需要 data-toggle="dropdown"
无论你是通过 JavaScript 调用下拉列表还是使用 data-api，都始终需要在下拉列表的触发元素上显示 data-toggle="dropdown"。
选项
可以通过数据属性或 JavaScript 传递选项。对于数据属性，将选项名称追加到 data-，如 data-offset=""。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| offset | 数字 | 字符串 | 函数 | 0 |
下拉列表相对于其目标的偏移量。 当使用函数确定偏移量时，它将使用一个包含偏移量数据作为其第一个参数的对象来调用。该函数必须返回具有相同结构的对象。触发元素 DOM 节点作为第二个参数传递。 有关更多信息，请参阅 Popper 的 offset 文档。 |
| flip | 布尔值 | true | 如果与引用元素重叠，则允许下拉列表翻转。有关更多信息，请参阅 Popper 的 flip 文档。 |
| boundary | 字符串 | 元素 | 'scrollParent' | 下拉列表菜单的溢出约束边界。接受 'viewport'、'window'、'scrollParent' 或 HTMLElement 引用（仅限 JavaScript）的值。有关更多信息，请参阅 Popper 的 preventOverflow 文档。 |
| reference | 字符串 | 元素 | 'toggle' | 下拉列表菜单的引用元素。接受 'toggle'、'parent' 或 HTMLElement 引用值。有关更多信息，请参阅 Popper 的 referenceObject 文档。 |
| display | 字符串 | 'dynamic' | 默认情况下，我们使用 Popper 进行动态定位。使用 static 禁用此功能。 |
| popperConfig | null | object | null | 若要更改 Bootstrap 的默认 Popper 配置，请参阅 Popper 配置 |
请注意，当 boundary 设置为除 'scrollParent' 之外的任何值时，样式 position: static 应用于 .dropdown 容器。
方法
| 方法 | 描述 |
|---|---|
$().dropdown('toggle') |
切换给定导航栏或选项卡导航的下拉菜单。 |
$().dropdown('show') |
显示给定导航栏或选项卡导航的下拉菜单。 |
$().dropdown('hide') |
隐藏给定导航栏或选项卡导航的下拉菜单。 |
$().dropdown('update') |
更新元素下拉菜单的位置。 |
$().dropdown('dispose') |
销毁元素的下拉菜单。 |
事件
所有下拉菜单事件都在 .dropdown-menu 的父元素上触发，并具有 relatedTarget 属性，其值为切换锚元素。hide.bs.dropdown 和 hidden.bs.dropdown 事件具有 clickEvent 属性（仅当原始事件类型为 click 时），其中包含单击事件的事件对象。
| 事件 | 描述 |
|---|---|
show.bs.dropdown |
在调用 show 实例方法时立即触发此事件。 |
shown.bs.dropdown |
当下拉菜单对用户可见时触发此事件（将等待 CSS 过渡完成）。 |
hide.bs.dropdown |
在调用 hide 实例方法时立即触发此事件。 |
hidden.bs.dropdown |
当下拉菜单对用户隐藏完毕时触发此事件（将等待 CSS 过渡完成）。 |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})