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);
});
自己动手试一试 »
