快捷導(dǎo)航

Bootstrap創(chuàng)建可折疊的組件

更新時(shí)間：2016年02月23日 16:35:06 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了Bootstrap創(chuàng)建可折疊組件的對(duì)應(yīng)方法，以實(shí)例為大家分享了Bootstrap折疊組件，感興趣的小伙伴們可以參考一下

本文將學(xué)習(xí)如何通過Bootstrap創(chuàng)建可折疊的組件，具體內(nèi)容如下
什么是必需的
您必須引用 jquery.js 和 bootstrap-collapse.js - 這兩個(gè) JavaScript 文件都位于 docs/assets/js 文件夾內(nèi)。
您可以在不編寫大量 JavaScript 或者不調(diào)用 JavaScript 的情況下創(chuàng)建可折疊的組件。
實(shí)例
第一個(gè)實(shí)例演示如何不調(diào)用 JavaScript 創(chuàng)建可折疊的組件。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>collapsible example</title>
 <link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
 <div class="container-fluid">
 <div class="accordion" id="accordion2">
  <div class="accordion-group">
  <div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
   Click me to exapand. Click me again to collapse. Part I.
  </a>
  </div>
  <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
  <div class="accordion-inner">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  </div>
  </div>
  <div class="accordion-group">
  <div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
   Click me to exapand. Click me again to collapse. Part II.
  </a>
  </div>
  <div id="collapseTwo" class="accordion-body collapse">
  <div class="accordion-inner">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  </div>
  </div>
  <div class="accordion-group">
  <div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
   Click me to exapand. Click me again to collapse. Part III.
  </a>
  </div>
  <div id="collapseThree" class="accordion-body collapse">
  <div class="accordion-inner">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  </div>
  </div>
  </div>
 </div>
 <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
 <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>

解釋
這里有三點(diǎn)需要注意。第一，添加 data-toggle="collapse" 到您要點(diǎn)擊的鏈接上，用來展開或折疊組件。
第二，添加一個(gè) href 或一個(gè) data-target 屬性到父組件，它的值為子組件的 id。
第三，添加一個(gè) data-parent 屬性用來創(chuàng)建手風(fēng)琴式的效果。data-parent 屬性的值與主容器 div （保存整個(gè)手風(fēng)琴組件）的 id 屬性的值相同。如果您想要?jiǎng)?chuàng)建一個(gè)簡單的折疊組件，不需要像手風(fēng)琴那么復(fù)雜，就不需要添加這個(gè)屬性。
實(shí)例
第二個(gè)實(shí)例演示如何創(chuàng)建簡單的可折疊組件。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>collapsible via JavaScript example</title>
 <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe.
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>

通過 JavaScript 調(diào)用
您可以使用下面的代碼來通過 JavaScript 觸發(fā)折疊。

 $(".collapse").collapse()

選項(xiàng)、方法和事件
這里有一些通過 Bootstrap Collapsible JavaScript 插件使用的選項(xiàng)、方法、事件。具體如下所示：
選項(xiàng)
parent:值的類型為 Selector。默認(rèn)值為 false。當(dāng)父元素顯示時(shí)，父元素下所有的可折疊元素是關(guān)閉的。
toggle:值的類型為 Boolean。默認(rèn)值為 true。當(dāng)被調(diào)用時(shí)，切換所有的可折疊元素。
toggle:值的類型為 Boolean。默認(rèn)值為 true。當(dāng)被調(diào)用時(shí)，切換所有的可折疊元素。
方法
.collapse(options):觸發(fā)可折疊內(nèi)容。接受一個(gè)可選的 option 對(duì)象。
.collapse('toggle'):展示或隱藏一個(gè)可折疊的頁面元素。
.collapse('show'):展示一個(gè)可折疊的頁面元素。
.collapse(hide):隱藏一個(gè)可折疊的頁面元素。
事件
show:當(dāng) show 實(shí)例方法被調(diào)用之后，此事件被立即觸發(fā)。
shown:當(dāng)可折疊頁面元素顯示出來之后（同時(shí) CSS 過渡效果也已執(zhí)行完畢），此事件被觸發(fā)。
hide:當(dāng) hide 實(shí)例方法被調(diào)用之后，此事件被立即觸發(fā)。
hidden:當(dāng)可折疊頁面元素向用戶隱藏之后（同時(shí) CSS 過渡效果也已執(zhí)行完畢），此事件被觸發(fā)。