Bootstrap每天必學之折疊_javascript技巧

本文主要來學習JavaScript插件--折疊。
1、過渡效果
關於過渡效果
對於簡單的過渡效果，只需將transition.js和其它JS檔案一起引入即可。如果你使用的是編譯（或壓縮）好的bootstrap.js文件，就無需再單獨將其引入了。
What's inside
Transition.js是針對 is a basic helper for transitionEnd事件的一個基本助手工具，也是CSS過渡效果的模擬。它被其它插件用來檢測當前瀏覽器對CSS過渡效果是否支援。
2、折疊
對支援折疊功能的組件，例如accordions和導航，賦予基本樣式和靈活的支援。

外掛依賴

折疊插件依賴過渡效果插件。

案例
使用折疊插件，透過擴展panel組件從而構建了一個簡單的accordion組件。
先來看一下效果。

接下來看一下程式碼的實作。

<div class="container" style="margin-top:140px;">
  <div class="panel-group" id="accordion">
  <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
   <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item </a>
   </h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse in">
   <div class="panel-body"> 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>
  <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
   <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a>
   </h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse">
   <div class="panel-body"> 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>
  <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
   <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a>
   </h4>
  </div>
  <div id="collapseThree" class="panel-collapse collapse">
   <div class="panel-body"> 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>
 </div>
 </div>

第一步：首先最外面那層panel-group這層下麵包括幾個小組。
第二步：看幾個簡單的組別

<div class="panel panel-default">
 <div class="panel-heading">
  <h4 class="panel-title">
  <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a>
  </h4>
 </div>
 <div id="collapseOne" class="panel-collapse collapse in">
  <div class="panel-body">
  </div>
 </div>
</div>

透過程式碼也比較清楚的可以看出一個panel的結構。
panel-header和pandl-body,然後panel-header裡面可以包含標題，連結。透過連結和panel-body相連。
步驟三：你可以發現在panel-group中有一個id="accordion",然後下面每個標題下連結中有個data-parent="#accordion"。
如果去掉的話，那麼效果就是點擊其他連結後，原來的panel並不會再縮起來了。
你可以透過另一個方式來展示折疊的效果。

 <div class="container" style="margin-top:140px;">
 <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"> simple collapsible </button>

<div id="demo" class="collapse in">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>

用法
折疊外掛程式透過幾個簡單的類別來控制樣式
.collapse 隱藏內容
.collapse  in  顯示內容
.collapsing。 It  is added when the transition starts, and removed when it finishes意思大概可能就是折疊被添加後過渡效果就有了，然後如果被移除了它就結束了。
透過data屬性
僅僅透過向頁面元素添加data-toggle="collapse" 和data-target就可以為其賦予控制可折疊頁面元素的能力。 data-target屬性接受一個CSS選擇器作為其控制物件。請確保為可折疊頁面元素新增collapse class。如果你希望可折疊頁面元素的預設狀態是展開的，請新增in class。
為了給一組可折疊頁面元素添加控制器，請添加data-parent="#selector"即可。請參考上面的例子即可。
透過JavaScript

<button type="button" class="btn btn-danger" onClick="Open()">打开</button>
<button type="button" class="btn btn-danger" onClick="Hide()">折叠</button>

<div id="demo" class="collapse in">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 class="panel-group" id="accordion" style="margin-top:240px;">

 <script type="text/javascript"> $(function(){
   $("#demo").collapse({
 toggle: false })
  }) 
  function Open(){
  $("#demo").collapse("show");
  }
 function Hide(){
  $("#demo").collapse("hide");
  } </script>

來看看上面的效果

方法
賦予頁面元素可折疊功能。接受一個可選的object作為參數。
$("#demo").collapse({toggle: false})
這樣元素在初始化的時候會是展開的。
1.collapse('toggle')展示或隱藏一個可折疊的頁面元素。
2.collapse('show')展示一個可折疊頁面元素。
3.collapse('hide')隱藏一個可折疊頁面元素。
事件
Bootstrap中的折疊插件對外暴露了一組可以監聽的事件。

這樣就為元素綁定了隱藏時的事件。
以上就是本文的全部內容，希望對大家的學習有所幫助。