Bootstrap3 摺疊插件的調用方式

摺疊插件的調用方式

摺疊插件的結構相對複雜，但調用比較簡單，可以通過data屬性調用，也可以通過JavaScript調用。

1、data 屬性調用

要激活摺疊插件的激活行爲，首先爲標題部分的鏈接定義 data-toggle="collapse" 屬性，還要爲包含框定義 id，並在標題中通過 data-parent 屬性指向該 id，以便在同一個包含框中同時只能有一個內容部分被顯示出來。如：

1. <div class="accordion" id="accordion2">
2.     <div class="accordion-group">
3.     <div class="accordion-heading">
4.       <a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">
5.         Collapsible Group Item #1
6.       </a>
7.     </div>
8.     <div id="collapseOne" class="accordion-body collapse in">
9.       <div class="accordion-inner">
10.         Anim pariatur ...
11.       </div>
12.     </div>
13.   </div>
14.   <div class="accordion-group"></div>
15. </div>

2、JavaScript調用

使用選項時，JavaScript調用摺疊插件的格式爲：

1. $(".collapse").collapse(options)

在調用collapse() 方法時，可以包含一個配置對象，該對象包含 parent 和 toggle 兩個配置參數。如，通過以下JavaScript代碼，即可實現摺疊插件的交互行爲和動態效果：

1. <script>
2. $('.collapse').collapse({
3.   parent: "#accordion2"
4. });
5. $('.accordion-toggle').click(function() {
6.   $(this).parent().next().collapse('toggle');
7. });
8. </script>

除此之外，Bootstrap還爲摺疊插件提供了其它一些方法，可以根據需要選擇使用。這些方法爲：

• .collapse('toggle')：讓一個可摺疊元素在顯示和隱藏之間切換。
• .collapse('show')：顯示一個可摺疊元素。
• .collapse('hide')：隱藏一個可摺疊元素。

關於作者

歪脖先生，十五年以上軟件開發經驗，酷愛Web開發，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML寶典》、《揭祕CSS》、《Less簡明教程》、《JSON教程》、《Bootstrap2用戶指南》、《Bootstrap3實用教程》，並全部在 GitHub 上開源。