Bootstrap 折叠插件Collapse 调用方式

调用方式

Bootstrap折叠插件Collapse的结构相对复杂，但调用比较简单，可以通过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 上开源。