Bootstrap JS 下拉菜单

下拉菜单 CSS 类

有关 Dropdowns 下拉菜单的教程,请阅读我们的 Bootstrap 下拉菜单教程。

描述 例子
.dropdown 表示下拉菜单 测试一下
.dropdown-item 下拉菜单中的样式链接,带有适当的填充等 测试一下
.dropdown-item-text 使用适当的填充等在下拉菜单中设置样式文本或文本链接 测试一下
.dropdown-menu 构建下拉菜单 测试一下
.dropdown-menu-right 右对齐下拉菜单 测试一下
.dropdown-header 在下拉菜单中添加标题 测试一下
.dropup 表示下拉菜单 测试一下
.disabled 禁用下拉菜单中的项目 测试一下
.active 为下拉菜单中的活动元素设置样式 测试一下
.divider 用水平线分隔下拉菜单中的项目 测试一下

通过 data-* 属性

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

实例

<button type="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</button>
亲自试一试 »

通过 JavaScript

手动启用:

实例

$('.dropdown-toggle').dropdown();
亲自试一试 »

注释: 无论您是否调用 dropdown() 方法,都需要 data-toggle="dropdown" 属性。


Dropdown 选项

None

Dropdown 下拉方法

下表列出了所有可用的下拉方法。

方法 描述 试一试
.dropdown("toggle") 切换下拉菜单。 如果设置,它将默认打开下拉菜单 测试一下
.dropdown("update") 更新元素下拉列表的位置
.dropdown("dispose") 销毁一个元素的下拉菜单

Dropdown 下拉事件

下表列出了所有可用的下拉事件。

事件 描述 试一试
show.bs.dropdown 在即将显示下拉菜单时发生。 测试一下
shown.bs.dropdown 在下拉菜单完全显示时发生(在 CSS 转换完成后) 测试一下
hide.bs.dropdown 当下拉菜单即将被隐藏时发生 测试一下
hidden.bs.dropdown 在下拉菜单完全隐藏时发生(在 CSS 转换完成后) 测试一下

提示: 使用 jQuery 的 event.relatedTarget 来获取触发下拉菜单的元素:

实例

$(".dropdown").on("show.bs.dropdown", function(event){
  var x = $(event.relatedTarget).text(); // 获取元素的文本
  alert(x);
});
亲自试一试 »