下拉菜单

使用Bootstrap下拉插件，可以切换上下文覆盖，为了显示链接列表和更多内容。

更新于: 2023-04-30 14:28:21 查看: 494

发布于: 2021-9-3 19:54 发布者: 大米

概述 

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

下拉列表建立在第三方库上， Popper,它提供动态定位和视口检测。Popper不用于定位导航栏中的下拉列表，尽管不需要动态定位。

示例 

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

单个下拉菜单

任何一个 .btn 都可以通过一些标记更改转换为下拉开关。下面是如何将它们与 <button> 元素一起使用： 

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

然后带有一个 <a> 元素: 

<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>

<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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">
Action
</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">Action</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>

菜单大小

按钮下拉列表适用于所有大btn-lg小btn-sm的按钮，包括默认和拆分下拉按钮。

深色的下拉菜单

选择较暗的下拉菜单以匹配深色导航栏或自定义样式，方法是将 .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">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<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">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
      </a>
      <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
        <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>

拉动方向

上拉菜单

通过向父元素添加 .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>

右拉菜单

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

左拉菜单 

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

菜单项目

现在您可以选择在下拉列表中使用 <button> 元素，而不仅仅是 <a>。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<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" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

菜单对齐

默认情况下，下拉菜单会自动从其父菜单的顶部和左侧100%定位。添加 .dropdown-menu-end 到 .dropdown-menu 右对齐下拉菜单。在RTL中使用Bootstrap时，方向是镜像的，这意味着。下拉菜单结束将出现在左侧。 

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

若要将下拉菜单 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">
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>

请注意，由于导航栏中未使用Popper，因此您无需向导航栏中的下拉按钮添加 data-bs-display="static" 属性。

对齐选项

使用上面显示的大多数选项，它在一处展示了各种下拉对齐选项。 

<div class="btn-group">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <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>

菜单内容

标题

在任何下拉菜单中添加标题.dropdown-header以标记操作的各个部分。
<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>

还可以在dropdown-menu里放置文本，表单 等。

下拉选项

使用 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="#">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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
  <span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
  <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>

用法

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

通过数据属性

添加 data-bs-toggle="dropdown"添加到链接或下列切换按钮 

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

通过JavaScript

通过JavaScript调用下拉列表： 

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown" 仍然时必须的

不管您是通过JavaScript调用dropdown还是使用dataapi， data-bs-toggle="dropdown" 始终需要出现在dropdown的触发器元素上。

选项 

选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称附加到 data-bs-，如 data-bs-offset="" 中所示。
名字 类型 默认值 描述
flip boolean true 允许Dropdown在引用元素重叠的情况下翻转。有关更多信息，请参阅Popper的 flip文档。
boundary string | element 'scrollParent' 下拉菜单的溢出约束边界。默认情况下，它是 'clippingParents' ，可以接受HTMLElement引用（仅限于JavaScript）。有关更多信息，请参阅Popper的 文档。
reference string | element 'toggle' 下拉菜单的引用元素。接受 'toggle', 'parent' 或HTMLElement引用的值。有关更多信息，请参阅Popper的 构造文档。
display string 'dynamic' 默认情况下，我们使用Popper进行动态定位。用static禁用它。
popperConfig null | object null 要更改引导程序的默认Popper配置，请参阅 Popper的配置

注意当 boundary 设置为 'scrollParent' 以外的任何值时，样式为 position: static 将应用于 .dropdown 容器。

方法

方法 描述
toggle 切换给定导航栏或选项卡式导航的下拉菜单。
show 显示给定导航栏或选项卡式导航的下拉菜单。
hide 隐藏给定导航栏或选项卡式导航的下拉菜单。
update 更新元素下拉列表的位置。
dispose 销毁元素的下拉列表。（删除DOM元素上存储的数据）
getInstance 静态方法，该方法允许您获取与DOM元素关联的dropdown实例。

事件

所有下拉事件都在 .dropdown-menu 的父元素上激发，并具有 relatedTarget 属性，其值为toggling anchor元素。hide.bs.dropdown 以及 hidden.bs.dropdown 事件具有 clickEvent 属性（仅当原始事件类型为 click 时），该属性包含点击事件的事件对象。

方法 描述
show.bs.dropdown 调用show instance方法时立即激发。
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...
})

扫描二维码，手机查看
声明：部分数据/图片来源互联网，不代表Hluse Doc.,真实性请妥善甄别。
收藏 邀请