## 折疊插件 collapse.js 折疊插件（collapse.js）可以很容易地讓頁面區域折疊起來。當列表菜單的條目特別多，而頁面空間有限時，使用類似于手風琴的折疊菜單可以節約頁面空間，方便用戶瀏覽。 **實例** * `.collapse` 隱藏內容 * `.collapsing` 在轉換期間應用 * `.collapse.in`顯示內容 可以使用帶有href屬性的鏈接，或具有數據目標屬性的按鈕。在這兩種情況下，都需要data-toggle=“collapse”。單擊下面的按鈕以通過類更改顯示和隱藏另一個元素： ```html <a href="#collapseAnli" class="btn btn-primary" role="button" data-toggle="collapse" aria-controls="collapseAnli">帶href屬性鏈接</a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseAnli" aria-controls="collapseAnli">帶有data-target的按鈕</button> <div class="collapse" id="collapseAnli"> <div class="well"> <p>可以使用帶有href屬性的鏈接，或具有數據目標屬性的按鈕。在這兩種情況下，都需要data -toggle=“collapse”。單擊下面的按鈕以通過類更改顯示和隱藏另一個元素</p> </div> </div> ```  ***** **手風琴的折疊菜單** 擴展默認折疊行為以創建面板組件一致的折疊。 ```html <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-controls="collapseOne" aria-expanded="false">part one</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <p>折疊插件（collapse.js）可以很容易地讓頁面區域折疊起來。當列表菜單的條目特別多，而頁面空間有限時，使用類似于手風琴的折疊菜單可以節約頁面空間，方便用戶瀏覽。</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-controls="collapseTwo" aria-expanded="false">part Two</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <p>折疊插件（collapse.js）可以很容易地讓頁面區域折疊起來。當列表菜單的條目特別多，而頁面空間有限時，使用類似于手風琴的折疊菜單可以節約頁面空間，方便用戶瀏覽。</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-controls="collapseThree" aria-expanded="false">part Three</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <p>折疊插件（collapse.js）可以很容易地讓頁面區域折疊起來。當列表菜單的條目特別多，而頁面空間有限時，使用類似于手風琴的折疊菜單可以節約頁面空間，方便用戶瀏覽。</p> </div> </div> </div> </div> ```  單擊任意菜單，隱藏內容會展開，如果再點擊同一個菜單就會隱藏；在一個菜單展開的情況下，點擊另一個菜單的時候，展開的菜單內容就會被隱藏。 注意事項 ： > 1. 使展開/折疊控件可訪問 請確保將展開的aria添加到控件元素中。此屬性顯式地定義可折疊元素的當前狀態，如果可折疊元素在默認情況下是關閉的，那么它的值應該是aria-expanded=“false”。如果您已經使用in類將可折疊元素設置為默認打開，請改為在控件上設置aria-expanded=“true”。插件將根據可折疊元素是否已打開或關閉自動切換此屬性。 > 2. 如果控件元素的目標是單個可折疊元素，即data-target屬性指向id選擇器，則可以向control元素添加一個附加的aria-controls屬性，其中包含可折疊元素的id。 ***** **使用方法** **1.** 通過data屬性實現折疊 只需向元素添加data-toggle='collapse'和data-target=''，就可以對隱藏的折疊內容進行控制（通常在button或a標簽上添加這兩個屬性）。data-target 屬性接受一個 CSS 選擇器，并會對其應用折疊效果。確保將類collapse添加到可折疊元素中。如果希望它默認打開，請在中添加附加類 in。 要將類似accordion的組管理添加到可折疊控件中，請添加數據屬性data-parent=“#selector”。 **2.** 通過javascript實現折疊 ~~~js $('.collapse').collapse() ~~~ 選項可以通過data屬性或JavaScript傳遞。對于data屬性，將選項名稱附加到data-，如data parent=''。 | 名稱 | 類型 | 默認值 | 說明 | | --- | --- | --- | --- | | parent | 選擇器 | false | 如果指定了選擇器，則該選擇器指定的父元素下，同一時刻只能顯示一個折疊面板 | | toggle | boolean | true | 是否切換可折疊元素的狀態 | ***** **調用方式** **1.** 使用選項時，JavaScript調用折疊插件的格式為： $(".collapse").collapse(options) 在調用collapse() 方法時，可以包含一個配置對象，該對象包含 parent 和 toggle 兩個配置參數。通過以下JavaScript代碼，即可實現折疊插件的交互行為和動態效果： ```js $('.collapse').collapse({ parent: "#accordion2" ); $('.accordion-toggle').click(function() { $(this).parent().next().collapse('toggle'); }); ``` **2.** .collapse('toggle')：讓一個可折疊元素在顯示和隱藏之間切換。 **3.** .collapse('show')：顯示一個可折疊元素。 **4.** .collapse('hide')：隱藏一個可折疊元素。 ***** **折疊插件的事件** Bootstrap還為折疊組件提供了一組事件，通過這些事件，可以監聽用戶的行為及折疊組件的狀態。 | 事件 | 含義 | | --- | --- | | show.bs.collapse | 調用show方法時，立即觸發該事件 | | shown.bs.collapse | 當可折疊元素對用戶完全可見（會等待過渡效果執行結束）后，觸發該事件 | | hide.bs.collapse | 調用hide方法時，立即觸發該事件 | | hidden.bs.collapse | 當可折疊元素對用戶完全不可見（而且過渡效果執行完畢）后，觸發該事件 | ~~~js $('#myCollapsible').on('hidden.bs.collapse', function () { alert('內容已隱藏')； }) ~~~