Bootstrap JS 下拉菜单
下拉菜单 CSS 类
有关下拉菜单的教程，请阅读我们的 Bootstrap 下拉菜单教程.
| 类 | 描述 | 示例 |
|---|---|---|
.dropdown |
指示下拉菜单 | 试试 |
.dropdown-item |
为下拉菜单中的链接设置合适的填充等样式 | 试试 |
.dropdown-item-text |
为下拉菜单中的文本或文本链接设置合适的填充等样式 | 试试 |
.dropdown-menu |
构建下拉菜单 | 试试 |
.dropdown-menu-right |
右对齐下拉菜单 | 试试 |
.dropdown-header |
在下拉菜单中添加标题 | 试试 |
.dropup |
指示向上下拉菜单 | 试试 |
.disabled |
禁用下拉菜单中的项目 | 试试 |
.active |
为下拉菜单中的活动元素设置样式 | 试试 |
.divider |
用水平线分隔下拉菜单中的项目 | 试试 |
通过 data-* 属性
将 data-toggle="dropdown" 添加到链接或按钮以切换下拉菜单。
通过 JavaScript
使用以下方法手动启用
注意： 无论是否调用 dropdown() 方法，都需要 data-toggle="dropdown" 属性。
下拉菜单选项
| 无 |
下拉菜单方法
下表列出了所有可用的下拉菜单方法。
| 方法 | 描述 | 试试 |
|---|---|---|
| .dropdown("toggle") | 切换下拉菜单。如果设置，它将默认打开下拉菜单 | 试试 |
| .dropdown("update") | 更新元素的下拉菜单位置 | |
| .dropdown("dispose") | 销毁元素的下拉菜单 |
下拉菜单事件
下表列出了所有可用的下拉菜单事件。
| 事件 | 描述 | 试试 |
|---|---|---|
| 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);
});
自己尝试 »
