Bootstrap JS 下拉菜单

下拉菜单 CSS 类

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

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

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

<button type="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</button>

手动启用:

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

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

None

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

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

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

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