下拉弹出菜单

弹出菜单是可触发的、上下文叠加显示链接列表和别的内容。它们可以与Bootstrap内置的弹出菜单JavaScript插件交互。它通过点击触发，而不是通过鼠标悬停悬浮。这是一个故意设计决策。

示例

把弹出菜单的触发器以及弹出菜单包裹在一个.dropdown中，或者其它声明了position:relative;的元素中。然后，添加菜单的HTML。

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

按钮元素

你可以视情况在你的弹出菜单中使用<button>元素，而不是<a>元素。

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" 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>

对齐

默认情况下，一个弹出菜单的菜单是自动放置在父元素下面，与父元素左侧对齐。给.dropdown-menu添加.dropdown-menu-right类能使菜单向右侧对齐。

Heads up! Dropdowns are positioned only with CSS and may need some additional styles for exact alignment.

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</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>

禁用的菜单项

对弹出菜单中的某一项添加.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，通过切换菜单项的父元素上的.open类，弹出菜单插件可以切换内容（弹出菜单）的可见性。

在移动设备上，打开一个弹出菜单会添加一个.dropdown-backdrop作为轻触区域，如果在菜单外面轻触时弹，菜单会关闭。这是支持iOS设备的要求。这意味着在移动设备上，从一个打开的弹出菜单切换到另一个弹出菜单至少需要两次轻触。

注意：data-toggle-"dropdown"属性是关闭弹出菜单的菜单在应用程序级别的依靠。所以最好一直使用它。

利用数据属性

给一个链接或者按钮添加一个data-toggle="dropdown"以切换一个弹出菜单。

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

为了保持URL与链接按钮交互，请使用data-target属性而不是href="#"。

<div class="dropdown">
  <a data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </a>

  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

利用JavaScript

通过JavaScript调用弹出菜单：

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

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。