## 下拉菜單 dropdown.js 下拉菜單主體結構參照第四章 . 組件中的 下拉菜單 部分，這里主要講下拉菜單的主要效果的實現。 **使用** * 通過data數據屬性或JavaScript，dropdown插件通過切換父列表項上的.open類來切換隱藏的內容（下拉菜單）。 * 在移動設備上，打開一個下拉菜單會添加一個.dropdown背景作為一個點擊區域，當你在菜單外點擊時，可以關閉下拉菜單。這意味著從一個打開的下拉菜單切換到另一個不同的下拉菜單需要在移動設備上進行額外的點擊。 * 注意：data-toggle=“dropdown”屬性依賴于在應用程序級別關閉下拉菜單，因此最好始終使用它。 **1.** 通過data數據屬性 將data toggle=“dropdown”添加到鏈接或按鈕以切換下拉列表。 ```js <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"> search <span class="caret"></span> </button> ``` **2.** 通過JavaScript ~~~js $('.dropdown-toggle').dropdown() ~~~ 注意 :不管是通過JavaScript調用dropdown還是使用data數據屬性，datatoggle=“dropdown”始終需要出現在dropdown的觸發器元素上。 ***** **方法** $（' 選擇指定元素 '）.dropdown（'toggle'） 切換指定導航欄或選項卡式導航的下拉菜單。 ***** **事件** Bootstrap 的下拉菜單類提供了一些事件用于監聽并執行你自己的代碼。 所有下拉事件都在.dropdown菜單的父元素上激發并且都有一個relatedTarget屬性，其值是togginganchor元素。 | 事件類型 | 事件描述 | | --- | --- | | show.bs.dropdown | 此事件在調用show instance方法時立即激發。 | | shown.bs.dropdown | 當下拉列表對用戶可見時（將等待CSS轉換完成）激發此事件。| | hide.bs.dropdown | 調用hide實例方法后，將立即激發此事件。 | | hidden.bs.dropdown | 當下拉列表完成對用戶隱藏（將等待CSS轉換完成）時激發此事件。 | 用法如下： ~~~js $('#myDropdown').on('show.bs.dropdown', function () { // do something… }) ~~~