Bootstrap JS 下拉選單
下拉選單 CSS 類
有關下拉選單的教程，請閱讀我們的 Bootstrap 下拉選單教程。
| 類 | 描述 | 示例 |
|---|---|---|
.dropdown |
指示下拉選單 | 試一試 |
.dropdown-item |
使用適當的內邊距等樣式化下拉選單中的連結 | 試一試 |
.dropdown-item-text |
使用適當的內邊距等樣式化下拉選單中的文字或文字連結 | 試一試 |
.dropdown-menu |
構建下拉選單 | 試一試 |
.dropdown-menu-right |
右對齊下拉選單 | 試一試 |
.dropdown-header |
在下拉選單中新增標題 | 試一試 |
.dropup |
指示下拉向上選單 | 試一試 |
.disabled |
停用下拉選單中的專案 | 試一試 |
.active |
樣式化下拉選單中的活動元素 | 試一試 |
.divider |
用水平線分隔下拉選單中的專案 | 試一試 |
透過 data-* 屬性
向連結或按鈕新增 data-toggle="dropdown" 以切換下拉選單。
透過 JavaScript
使用以下命令手動啟用：
注意: 無論您是否呼叫 dropdown() 方法，data-toggle="dropdown" 屬性都是必需的。
下拉選單選項
| 無 |
下拉選單方法
下表列出了所有可用的下拉選單方法。
| 方法 | 描述 | 試一試 |
|---|---|---|
| .dropdown("toggle") | 切換下拉選單。如果設定，它將預設開啟下拉選單 | 試一試 |
| .dropdown("update") | 更新元素的下拉選單位置 | |
| .dropdown("dispose") | 銷燬元素的下拉選單 |
下拉選單事件
下表列出了所有可用的下拉選單事件。
| 事件 | 描述 | 試一試 |
|---|---|---|
| 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);
});
自己動手試一試 »
