目录
  1. WIKI教程
  2. 学习Bootstrap
  3. Bootstrap - 折叠插件( Collapse Plugin)

Bootstrap - 折叠插件( Collapse Plugin)

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

如果要单独包含此插件功能，则需要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>
新页面打开
<上一篇.Bootstrap - Button插件( Button Plugin)
Bootstrap - 折叠插件( Collapse Plugin).下一篇>
↑回到顶部↑
WIKI教程 @2018