Dropdowns（下拉菜单） - [ Bootstrap 4 中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

directory search

Getting started Accessibility（无障碍） Browsers and devices（浏览器和设备） Build tools（构建工具） Contents（内容） Download（下载） JavaScript Theming Bootstrap（主题Bootstrap） Webpack Components: Alerts Alerts（警报） Components: Badges Badges（徽章） Components: Breadcrumb Breadcrumb Components: Button group Button group（按钮组） Components: Buttons Buttons（按钮） Components: Cards Components: Carousel Cards（卡） Carousel（圆盘传送带） Components: Collapse Collapse（折叠） Components: Dropdowns Dropdowns（下拉菜单） Components: Forms Forms（表单） Components: Input group Input group（输入群组） Components: Input group Jumbotron（广告大屏幕） Components: List group List group（列表组） Components: Modal Modal（互动视窗） Components: Navbar Navbar（导航栏） Components: Navs Navs（导航栏） Components: Pagination Pagination（分页） Components: Popovers Popovers（弹出框） Components: Progress Progress（进度条） Components: Scrollspy Scrollspy（滚动监听） Components: Tooltips Tooltips（提示工具） Content Code（代码） Figures（图片区） Images（图片） Reboot（重置） Tables（表格） Typography（排版） Layout Grid（网格） Layout（布局） Media object（多媒体对象） Utilities for layout（排版通用类别） Migration Migrating to v4（迁移到v4） Utilities Borders（边框） Clearfix（清除浮动） Close icon（关闭图标） Colors（颜色） Display property（显示属性） Embeds（内嵌） Flex（弹性） Float（浮动） Image replacement（图像替换） Position（位置） Screenreaders（荧幕阅读器） Sizing（尺寸） Spacing（间隔） Text（文本） Vertical alignment（垂直对齐） Visibility（能见度）

characters

切换上下文覆盖，以显示链接列表和更多与引导下拉插件。

概述

下拉菜单是可切换的，用于显示链接列表等的上下文覆盖。它们与包含的Bootstrap下拉式JavaScript插件交互。他们通过点击而不是通过盘旋来切换; 这是一个有意的设计决定。

下拉菜单建立在第三方库Popper.js上，该库提供动态定位和视口检测。一定要包括popper.min.js引导的JavaScript或使用前bootstrap.bundle.min.js/ bootstrap.bundle.js包含Popper.js。

如果你从源代码构建我们的JS，它需要util.js。

可达性

所述WAI ARIA标准定义了实际role="menu"插件，但是这是特定于该触发动作或功能应用类菜单。ARIA菜单只能包含菜单项，复选框菜单项，单选按钮菜单项，单选按钮组和子菜单。

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

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

实例

将下拉的切换（您的按钮或链接）和下拉菜单.dropdown或其他声明的元素封装在一起position: relative;。可以通过下拉菜单<a>或<button>元素来更好地满足潜在需求。

单按钮下拉

任何单个.btn可以变成下拉切换与一些标记更改。以下是您可以如何将它们与任何<button>元素配合使用的方法：

<div class="dropdown">  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button  </button>  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">    <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 show">  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link  </a>  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">    <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-haspopup="true" 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-haspopup="true" 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>

Sizing

按钮下拉菜单可以处理各种尺寸的按钮，包括默认和分割下拉按钮。

<!-- 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-haspopup="true" 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 button  </button>  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" 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 button  </button>  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" 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">Dropup</button>  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    <span class="sr-only">Toggle Dropdown</span>  </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" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    <span class="sr-only">Toggle Dropdown</span>  </button>  <div class="dropdown-menu">    <!-- Dropdown menu links -->  </div></div>

菜单项

历史上的下拉菜单内容必须是链接，但v4不再是这种情况。现在，您可以选择<button>在下拉列表中使用元素，而不仅仅是<a>s。

<div class="dropdown">  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown  </button>  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">    <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>

菜单对齐

默认情况下，下拉菜单自动从父级的顶部和左侧定位100％。添加.dropdown-menu-right到.dropdown-menu右侧对齐下拉菜单。

抬头！Dropper的位置得益于Popper.js（除非它们包含在导航栏中）。

<div class="btn-group">  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    This dropdown's menu is right-aligned  </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>

菜单标题

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

<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">  <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-check">      <label class="form-check-label">        <input type="checkbox" class="form-check-input">
        Remember me      </label>    </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-check">    <label class="form-check-label">      <input type="checkbox" class="form-check-input">
      Remember me    </label>  </div>  <button type="submit" class="btn btn-primary">Sign in</button></form>

禁用菜单项

添加.disabled到下拉菜单中的项目将其设置为禁用。

<div class="dropdown-menu">  <a class="dropdown-item" href="#">Regular link</a>  <a class="dropdown-item disabled" href="#">Disabled link</a>  <a class="dropdown-item" href="#">Another link</a></div>

用法

通过数据属性或JavaScript，下拉插件通过切换.show父列表项上的类来切换隐藏内容（下拉菜单）。该data-toggle="dropdown"属性依赖于在应用程序级别关闭下拉菜单，所以始终使用它是个好主意。

在支持触摸的设备上，打开下拉列表会将空（$.noop）mouseover处理程序添加到<body>元素的直接子元素。无可否认，这种丑陋的破解对于解决iOS事件委托中的一个怪癖是非常必要的，否则它将阻止在下拉菜单之外的任何地方触发关闭下拉菜单的代码。一旦下拉框关闭，这些额外的空mouseover处理程序就会被移除。

通过数据属性

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

<div class="dropdown">  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger  </button>  <div class="dropdown-menu" aria-labelledby="dLabel">    ...  </div></div>

通过JavaScript

通过JavaScript调用下拉菜单：

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`仍需

无论您是通过JavaScript调用下拉列表还是使用data-api，data-toggle="dropdown"总是需要在下拉的触发器元素中出现。

备选方案

选项可以通过数据属性或JavaScript传递。对于数据属性，请将选项名称附加到data-，如data-offset=""。

名称	类型	默认	描述
offset	number \| string \| function	0	下拉相对于其目标的偏移量。有关更多信息，请参阅Popper.js的偏移文档。
flip	boolean	true	允许下拉菜单在参考元素重叠的情况下翻转。有关更多信息，请参阅Popper.js的翻转文档。

方法

方法	描述
$().dropdown('toggle')	切换给定导航栏或标签导航的下拉菜单。
$().dropdown('update')	更新元素下拉列表的位置。
$().dropdown('dispose')	销毁元素的下拉菜单。

事件

所有下拉事件都在.dropdown-menu父元素上触发，并有一个relatedTarget属性，其值是切换锚点元素。

事件	描述
show.bs.dropdown	当show instance方法被调用时，此事件立即触发。
shown.bs.dropdown	当下拉菜单对用户可见时会触发此事件（等待CSS转换完成）。
hide.bs.dropdown	当调用隐藏实例方法时立即触发此事件。
hidden.bs.dropdown	当下拉菜单完成对用户隐藏时会触发此事件（等待CSS转换完成）。

$('#myDropdown').on('show.bs.dropdown', function () {  // do something…})

Previous article： Next article：

概述

可达性

实例