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);
});