Bootstrap JS 下拉菜单
JS 下拉菜单 (dropdown.js)
下拉菜单是一个可切换的菜单，允许用户从预定义列表中选择一个值。
有关下拉菜单的教程，请阅读我们的 Bootstrap 下拉菜单教程.
下拉菜单插件类
| 类 | 描述 | 示例 |
|---|---|---|
| .dropdown | 表示下拉菜单 | 尝试一下 |
| .dropdown-menu | 构建下拉菜单 | 尝试一下 |
| .dropdown-menu-right | 将下拉菜单右对齐 | 尝试一下 |
| .dropdown-header | 在下拉菜单中添加标题 | 尝试一下 |
| .dropup | 表示上拉菜单 | 尝试一下 |
| .disabled | 禁用下拉菜单中的项目 | 尝试一下 |
| .divider | 使用水平线将下拉菜单中的项目隔开 | 尝试一下 |
通过 data-* 属性
将 data-toggle="dropdown" 添加到链接或按钮以切换下拉菜单。
通过 JavaScript
手动启用使用
注意：无论是否调用 dropdown() 方法，都需要 data-toggle="dropdown" 属性。
下拉菜单选项
| 无 |
下拉菜单方法
下表列出了所有可用的下拉菜单方法。
| 方法 | 描述 | 尝试一下 |
|---|---|---|
| .dropdown("toggle") | 切换下拉菜单 | 尝试一下 |
下拉菜单事件
下表列出了所有可用的下拉菜单事件。
| 事件 | 描述 | 尝试一下 |
|---|---|---|
| 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);
});
自己尝试一下 »
更多示例
将插入符号图标更改为倒置
以下示例在单击下拉菜单时将插入符号图标从向下指向更改为向上指向
示例
/* CSS: */
<style>
.caret.caret-up {
border-top-width: 0;
border-bottom: 4px solid #fff;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$(".dropdown").on("hide.bs.dropdown", function(){
$(".btn").html('下拉菜单 <span class="caret"></span>');
});
$(".dropdown").on("show.bs.dropdown", function(){
$(".btn").html('下拉菜单 <span class="caret caret-up"></span>');
});
});
</script>
自己尝试一下 »
带有下拉菜单的导航栏
以下示例为导航栏中的按钮添加了一个下拉菜单
示例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">网站名称</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">主页</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">页面 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">页面 1-1</a></li>
<li><a href="#">页面 1-2</a></li>
<li><a href="#">页面 1-3</a></li>
</ul>
</li>
<li><a href="#">页面 2</a></li>
<li><a href="#">页面 3</a></li>
</ul>
</div>
</div>
</nav>
自己尝试一下 »
以下示例在导航栏中添加了一个带有登录表单的下拉菜单
示例
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">登录 <span class="glyphicon glyphicon-log-in"></span></a>
<div class="dropdown-menu">
<form id="formlogin" class="form container-fluid">
<div class="form-group">
<label for="usr">用户名:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button type="button" id="btnLogin" class="btn btn-block">登录</button>
</form>
<div class="container-fluid">
<a class="small" href="#">忘记密码？</a>
</div>
</div>
</li>
</ul>
自己尝试一下 »
多级下拉菜单
在此示例中，我们使用 jQuery 在单击时打开多级下拉菜单
示例
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
自己尝试一下 »
在此示例中，我们为多级下拉菜单创建了一个自定义 .dropdown-submenu 类
示例
/* CSS: */
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
自己尝试一下 »
