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('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="#">網站名稱</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>
自己動手試一試 »
