在线文档教程
首页 技术教程 开发文档 觅分类 ICON图标
技术教程 开发文档 觅分类 ICON图标

下拉菜单 | Dropdowns

下拉菜单

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

概述

下拉菜单是可切换的，用于显示链接列表等的上下文覆盖。它们与包含的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>元素配合使用的方法：

打开getbootstrap.com上的示例

<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>要素：

打开getbootstrap.com上的示例

<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>

最好的部分是你也可以用任何按钮变种来做到这一点：

打开getbootstrap.com上的示例

<!-- 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那些用于常规按钮下拉的添加。这些额外的变化使插入符号集中在分割按钮中，并在主按钮旁提供更适当大小的命中区域。

打开getbootstrap.com上的示例

<!-- 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

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

打开getbootstrap.com上的示例

<!-- 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到父元素。

打开getbootstrap.com上的示例

<!-- 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。

打开getbootstrap.com上的示例

<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（除非它们包含在导航栏中）。

打开getbootstrap.com上的示例

<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>

菜单标题

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

打开getbootstrap.com上的示例

<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>

菜单分隔器

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

打开getbootstrap.com上的示例

<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>

菜单表单

将表单放置在下拉菜单中，或将其放入下拉菜单中，并使用边距或填充实用程序为其提供所需的负空间。

打开getbootstrap.com上的示例

<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>

打开getbootstrap.com上的示例

<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到下拉菜单中的项目将其设置为禁用。

打开getbootstrap.com上的示例

<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 | function0下拉相对于其目标的偏移量。有关更多信息，请参阅Popper.js的偏移文档。
flipbooleantrue允许下拉菜单在参考元素重叠的情况下翻转。有关更多信息，请参阅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…
})

  • 黔ICP备2021005045号