Bootstrap 的 Dropdown

一、簡介

Dropdown 就是下拉列表，這里 有一個例子。

Dropdown 的完整代碼如下：

<div id="dropdownWrapper">
    <button class="btn btn-default dropdown-toggle" type="button" id="btnTargetDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnTargetDropdownMenu">
        <li class="dropdown-header">Dropdown header</li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li class="disabled"><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

{提示}

1. .dropdown-toggle 這個類不是必須的，不過稍后講到 Dropdown 的 JavaScript 代碼調用時要使用它，所以為了方便，先在這里一並寫入。
2. #dropdownWrapper 表示 Dropdown 的容器，可根據具體情況命名，稍后講到事件回調時，要用到它。

默認的 Dropdown 是隱藏的，讓它出現有兩種方式：

1. 標簽 API
2. JavaScript 代碼

二、通過標簽 API

1. 在 .dropdown-toggle 上添加 data-toggle="dropdown"（重申：.dropdown-toggle 不是必須添加的）。
2. 下拉菜單 <ul> 添加 .dropdown-menu。

三、通過 JavaScript 代碼

使用 $('.dropdown-toggle').dropdown('toggle'); 可以讓下拉框展開。

{注意} 無論是使用標簽 API 還是 JavaScript 代碼，data-toggle="dropdown" 始終要寫上。

四、Dropdown 的事件回調

Dropdown 回調事件總是在 .dropdown-menu 的父元素上觸發（此處指 #dropdownWrapper）。事件種類主要有四個：

1. show.bs.dropdown ：在 Dropdown 顯示時觸發。
2. shown.bs.dropdown ：在 Dropdown 顯示之后觸發。
3. hide.bs.dropdown ：在 Dropdown 隱藏時觸發。
4. hidden.bs.dropdown ：在 Dropdown 隱藏之后觸發。

舉個例子：

$('#dropdownWrapper').on('shown.bs.dropdown', function showDropdown() {
    console.log('Dropdown is showed!');
});

五、設備可訪問性

為了提高代碼的設備可訪問性，我們給 Dropdown 添加一些額外代碼。

1. 在 #btnTargetDropdownMenu 上：添加 aria-haspopup="true"，表示有子菜單。
2. 在 #btnTargetDropdownMenu 上：添加 aria-expanded="false"，表示菜單現在沒有展開。
3. 在 .dropdown-menu 上：添加 aria-labelledby="..."，值為受指向標簽的 id，在這里等同於設置 aria-label="Dropdown"，屏幕閱讀器讀到這里時，就會讀出 Dropdown 這個單詞。

六、參考鏈接

http://getbootstrap.com/javascript/#dropdowns

（完）