折叠插件（Collapse Plugin）

优质

小牛编辑

129浏览

2023-12-01

崩溃插件可以轻松地折叠页面的分割。无论您是使用它来构建手风琴导航还是内容盒，它都允许使用大量内容选项。

如果要单独包含此插件功能，则需要collapse.js 。这也需要Transition Plugin包含在您的Bootstrap版本中。另外，如Bootstrap插件概述一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js 。

你可以使用崩溃插件 -

To create collapsible groups or accordion 。这可以在下面的示例中创建 -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse.Section 1
            </a>
         </h4>
      </div>
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
               nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse.Section 2
            </a>
         </h4>
      </div>
      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse.Section 3
            </a>
         </h4>
      </div>
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
</div>

data-toggle = "collapse"将添加到您单击以展开或折叠组件的链接。
href或data-target属性被添加到父组件，其值为子组件的id 。
data-parent属性以创建类似手风琴的效果。

To create simple collapsible without the accordion markup - 可以在下面的示例中创建 -

<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
   simple collapsible
</button>
<div id = "demo" class = "collapse in">
   Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
      sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>

正如您在示例中所看到的，我们创建了一个简单的可折叠组件，与accordion不同，我们没有添加属性data-parent 。

用法 (Usage)

下表列出了崩溃插件用于处理繁重工作的类 -

类	描述
.collapse	隐藏内容。
.collapse.in	显示内容。
.collapsing	在转换开始时添加，在完成转换时删除。

您可以通过两种方式使用折叠插件 -

Via data attributes - 将data-toggle = "collapse"和data-target到元素以自动分配对可折叠元素的控制。 data-target属性将接受CSS选择器以应用折叠。请务必将类.collapse添加到collapsible元素中。如果您希望它默认打开，请包含其他类.in 。
要将类似手风琴的组管理添加到可折叠控件，请添加数据属性data-parent = "#selector" 。
Via JavaScript - 可以使用JavaScript激活折叠方法，如下所示 -

$('.collapse').collapse()

选项 (Options)

有些选项可以通过数据属性传递，或者JavaScript列在下表中 -

选项名称	类型/默认值	数据属性名称	描述
parent	selector Default − false	data-parent	如果selector为false，则将关闭指定父级下的所有可折叠元素（类似于传统的手风琴行为 - 这取决于accordion-group类）。
toggle	boolean Default − true	data-toggle	在调用时切换可折叠元素。

方法 (Methods)

以下是与可折叠元素一起使用的一些有用方法的列表。

方法	描述	例
Options - .collapse（选项）	将您的内容激活为可折叠元素。接受可选的选项对象。	`$('#identifier').collapse({ toggle: false })`
Toggle - .collapse（'切换'）	切换可折叠元素以显示或隐藏。	`$('#identifier').collapse('toggle')`
Show - .collapse（'show'）	显示可折叠元素。	`$('#identifier').collapse('show')`
Hide - .collapse（'隐藏'）	隐藏可折叠元素。	`$('#identifier').collapse('hide')`

例子 (Example)

以下示例演示了方法的用法 -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
   <div class = "panel panel-success">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>
      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
   <div class = "panel panel-warning">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
               Click me to expand. Click me again to collapse. Section 4--options method
            </a>
         </h4>
      </div>
      <div id = "collapseFour" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
</div>
<script type = "text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>

事件 (Events)

下表列出了可与折叠功能一起使用的一些事件。

事件	描述	例
show.bs.collapse	调用show方法后触发。	`$('#identifier').on('show.bs.collapse', function () { // do something })`
shown.bs.collapse	当折叠元素对用户可见时将触发此事件（将等待CSS转换完成）。	`$('#identifier').on('shown.bs.collapse', function () { // do something })`
hide.bs.collapse	调用hide实例方法时触发。	`$('#identifier').on('hide.bs.collapse', function () { // do something })`
hidden.bs.collapse	当用户隐藏了折叠元素时将触发此事件（将等待CSS转换完成）。	`$('#identifier').on('hidden.bs.collapse', function () { // do something })`

例子 (Example)

以下示例演示了事件的用法 -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
               Click me to expand. Click me again to collapse. Section --shown event
            </a>
         </h4>
      </div>
      <div id = "collapseexample" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
</div>
<script type = "text/javascript">
   $(function () { 
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script>