JS Dropdown (dropdown.js)
一個下拉菜單是一個可切換菜單，允許用戶選擇從預定義列表中的一個值。
對於有關Dropdowns的教程，請閱讀我們Bootstrap Dropdowns的教程 。
下拉插件類
| 類 | 描述 | 例 |
|---|---|---|
| .dropdown | 表示一個下拉菜單 | 嘗試一下 |
| .dropdown-menu | 構建下拉菜單 | 嘗試一下 |
| .dropdown-menu-right | 右對齊一個下拉菜單 | 嘗試一下 |
| .dropdown-header | 添加下拉菜單裡面的標題 | 嘗試一下 |
| .dropup | 指示dropup菜單 | 嘗試一下 |
| .disabled | 在下拉菜單中禁用項目 | 嘗試一下 |
| .divider | 符用一個水平線上的下拉菜單裡面的物品 | 嘗試一下 |
通過data-*屬性
添加data-toggle="dropdown"的鏈接或按鈕來切換下拉菜單。
通過JavaScript
與手動啟用：
注： data-toggle="dropdown"屬性不管你是否調用所需的dropdown()方法。
下拉選項
| None |
下拉方法
下表列出了所有可用的下拉方法。
| 方法 | 描述 | 嘗試一下 |
|---|---|---|
| .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(); // Get the text of the element
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('Dropdown
<span class="caret"></span>');
});
$(".dropdown").on("show.bs.dropdown",
function(){
$(".btn").html('Dropdown <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="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Page
1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Page
1-1</a></li>
<li><a href="#">Page
1-2</a></li>
<li><a href="#">Page
1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 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="#">Login <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">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div
class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button
type="button" id="btnLogin" class="btn btn-block">Login</button>
</form>
<div class="container-fluid">
<a class="small" href="#">Forgot password?</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> 試一試»