4.2一、Bootstrap V4自學之路-----內容---摺疊板

這個功能是之後很定必須用到的功能，以前不繫統學習的時候，只知其一;不知其二的拷貝它。

效果讓人不是很滿意。必定要把它拿下！

示例

點擊下面的按鈕，利用類的改變，顯示或隱藏另外一個元素：

• .collapse 隱藏內容

• .collapsing 在過渡過程當中應用到

• .collapse.in 顯示內容

你可使用帶href屬性的連接，或者使用帶data-target屬性的按鈕。在兩種狀況下，data-toggle="collapse"都是必需的。

手風琴示例

擴展默認的摺疊塊行爲，建立一個手風琴。

<div 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 data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        《div id="accordion" role="tablist" aria-multiselectable="true"》<br>
        --|《div class="panel panel-default"》<br>
        --| --|《div class="panel-heading" role="tab" id="headingOne"》這裏面是菜單的條headingOne<br>
        --| --| --| 《h4 class="panel-title"》   下面的《a》是出發滾動效果的文字<br>
        --| --| --| --| 《a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"》<br>
        --| --|《div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"》這裏是headingOne的正文內容。<br>
<br>
        --|《div class="panel panel-default"》<br>
        --| --|《div class="panel-heading" role="tab" id="headingTwo"》這裏面是菜單的條headingOne<br>
        --| --| --| 《h4 class="panel-title"》   下面的《a》是出發滾動效果的文字<br>
        --| --| --| --| 《a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"》<br>
        --| --|《div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo"》這裏是headingTwo的正文內容。<br>
<br>
        --|《div class="panel panel-default"》<br>
        --| --|《div class="panel-heading" role="tab" id="headingThree"》這裏面是菜單的條headingThree<br>
        --| --| --| 《h4 class="panel-title"》   下面的《a》是出發滾動效果的文字<br>
        --| --| --| --| 《a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree"》<br>
        --| --|《div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree"》這裏是正文內容。
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
  </div>
</div>

PS：其實我對手風琴的樣式仍是很期待的。好比加個背景色啦。好在換一下 <a>標籤的嵌套順序，就能夠實現點擊背景觸發手風琴效果。想一想這個仍是很開心。至於背景色，可能須要本身的去處理了。

易用性

確保給控件元素添加了aria-expanded屬性。這個屬性向屏幕閱讀器明肯定義了摺疊塊元素的當前的狀態。若是摺疊塊元素默認是閉合的，它必須擁有一個 aria-expanded="false"值。若是你用.in類設置摺疊塊元素是打開的，在控件上設置 aria-expanded="true"便可。插件會根據摺疊塊元素是打開仍是關閉着的，自動切換這個屬性。

此外，若是控件元素只對準一個單個元素——即，data-target的值指向一個id選擇器，你能夠給這個控件元素添加額外的aria-controls屬性，容納這個摺疊塊元素的id。現代的屏幕閱讀器以及相似的輔助技術利用這個屬性向用戶提供額外的快捷方式，以徑直導航到摺疊塊元素自己。

用法

摺疊插件使用一些類來處理摺疊行爲：

• .collapse 隱藏內容

• .collapse.in 顯示內容

• .collapsing 在過渡開始時加上，在過渡結束時移除。

這裏類能夠在_animation.scss中找到。

利用data屬性

只要向一個元素添加data-toggle="collapse"以及data-target屬性，就能夠自動讓這個元素成爲可摺疊元素。data-target屬性接受一個CSS選擇器，以應用摺疊。確保向可摺疊的元素添加.collapse類，若是你想讓它默認打開，再添加類.in。

爲了給一個摺疊塊控件添加相似手風琴組的效果，還須要添加data屬性data-parent="#selector"。能夠參考下面的演示瞭解實踐例子。

利用JavaScript

人爲啓用它：

$('.collapse').collapse()

選項

能夠利用data屬性或者JavaScript傳遞選項。若是用data屬性，請把選項名追加到data-後面，好比說寫成data-parent=""。

名稱	類型	默認值	描述
parent	selector	false	若是提供了一個選擇器，而後當某個摺疊塊打開時，這個指定的父元素下面全部別的摺疊塊元素都將自動關閉。與傳統的手風琴行爲類似，這依賴於.panel類。
toggle	boolean	true	在調用中摺疊塊元素。

方法

.collapse(options)

將某塊內容激活爲一個可摺疊的元素。接受一個可選的參數object。

$('#myCollapsible').collapse({   toggle: false })

.collapse(‘toggle’)

切換一個可摺疊元素打開或隱藏。

.collapse(‘show’)

顯示一個可摺疊元素。

.collapse(‘hide’)

隱藏一個可摺疊元素。

事件

Bootstrap的摺疊類爲相關的回調函數提供了事件接口。

事件類型	描述
show.bs.collapse	當調用show實例方法時，會當即觸發該事件。
shown.bs.collapse	當摺疊塊對用戶來講可見時（須要等待CSS過渡完成），會觸發該事件。
hide.bs.collapse	當調用hide實例方法時，會當即觸發該事件。
hidden.bs.collapse	當摺疊塊對用戶來講終於完成隱藏時（須要等待CSS過渡完成），會觸發該事件。

$('#myCollapsible').on('hidden.bs.collapse', function () {
   // do something… 
})