Bootstrap JS 下拉菜单

下拉 CSS 类

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

Class	Description	Example
`.dropdown`	Indicates a dropdown menu	尝试一下
`.dropdown-item`	Style links inside the dropdown menu with proper padding etc	尝试一下
`.dropdown-item-text`	Style text or text links inside the dropdown menu with proper padding etc	尝试一下
`.dropdown-menu`	Builds the dropdown menu	尝试一下
`.dropdown-menu-right`	Right-aligns a dropdown menu	尝试一下
`.dropdown-header`	Adds a header inside the dropdown menu	尝试一下
`.dropup`	Indicates a dropup menu	尝试一下
`.disabled`	Disables an item in the dropdown menu	尝试一下
`.active`	Styles the active element in a dropdown menu	尝试一下
`.divider`	Separates items inside the dropdown menu with a horizontal line	尝试一下

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

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

手动启用：

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

笔记：无论您是否调用 dropdown() 方法，data-toggle="dropdown" 属性都是必需的。

None

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

Method	Description	尝试一下
.dropdown("toggle")	Toggles the dropdown. If set, it will open the dropdown menu by default	尝试一下
.dropdown("update")	Updates the position of an element's dropdown
.dropdown("dispose")	Destroys an element's dropdown

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

Event	Description	尝试一下
show.bs.dropdown	Occurs when the dropdown is about to be shown.	尝试一下
shown.bs.dropdown	Occurs when the dropdown is fully shown (after CSS transitions have completed)	尝试一下
hide.bs.dropdown	Occurs when the dropdown is about to be hidden	尝试一下
hidden.bs.dropdown	Occurs when the dropdown is fully hidden (after CSS transitions have completed)	尝试一下

提示：使用 jQuery 的事件相关目标获取触发下拉列表的元素：

$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});