Bootstrap 折叠插件Collapse 调用方式

调用方式

Bootstrap折叠插件Collapse的结构相对复杂，但调用比较简单，可以通过data属性调用，也可以通过JavaScript调用。1、data 属性调用要激活折叠插件的激活行为，首先为标题部分的链接定义 data-toggle="collapse" 属性，还要为包含框定义 id，并在标题中通过 data-parent 属性指向该 id，以便在同一个包含框中同时只能有一个内容部分被显示出来。如：

<div class="accordion" id="accordion2">

    <div class="accordion-group">

    <div class="accordion-heading">

      <a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">

        Collapsible Group Item #1

      </a>

    </div>

    <div id="collapseOne" class="accordion-body collapse in">

      <div class="accordion-inner">

        Anim pariatur ...

      </div>

    </div>

  </div>

  <div class="accordion-group"></div>

</div>

2、JavaScript调用使用选项时，JavaScript调用折叠插件的格式为：

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

在调用collapse() 方法时，可以包含一个配置对象，该对象包含 parent 和 toggle 两个配置参数。如，通过以下JavaScript代码，即可实现折叠插件的交互行为和动态效果：

<script>

$('.collapse').collapse({

  parent: "#accordion2"

});

$('.accordion-toggle').click(function() {

  $(this).parent().next().collapse('toggle');

});

</script>

除此之外，Bootstrap还为折叠插件提供了其它一些方法，可以根据需要选择使用。这些方法为：.collapse('toggle')：让一个可折叠元素在显示和隐藏之间切换。
.collapse('show')：显示一个可折叠元素。
.collapse('hide')：隐藏一个可折叠元素。版权声明：本文出自 歪脖网 的《Bootstrap教程》，欢迎在线阅读，并提出宝贵意见。