Bootstrap - 折叠插件

上一页
下一页

折叠插件可以轻松创建页面上可折叠的部分。无论您是使用它来构建手风琴导航还是内容框，它都允许许多内容选项。

如果您想单独包含此插件功能，则需要collapse.js。这也需要将过渡插件包含在您的 Bootstrap 版本中。否则，如Bootstrap 插件概述章节中所述，您可以包含bootstrap.js或最小化的bootstrap.min.js。

您可以使用折叠插件 -

  • 创建可折叠组或手风琴。这可以像下面的示例一样创建 -

实时演示 
<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属性用于创建手风琴效果。

  • 创建无需手风琴标记的简单可折叠组件 - 这可以像下面的示例一样创建 -

实时演示 
<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>

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

用法

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

序号 类和描述
1

.collapse

隐藏内容。
2

.collapse.in

显示内容。
3

.collapsing

在过渡开始时添加，并在过渡结束时删除。

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

  • 通过数据属性 - 向元素添加data-toggle = "collapse"和data-target以自动分配可折叠元素的控制权。data-target属性将接受一个 CSS 选择器以应用折叠。请务必向可折叠元素添加.collapse类。如果您希望它默认打开，请包含附加类.in。

    要向可折叠控件添加类似手风琴的组管理，请添加数据属性data-parent = "#selector"。

  • 通过 JavaScript - 折叠方法可以用 JavaScript 激活，如下所示 -

$('.collapse').collapse()

选项

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

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

方法

这是一个与可折叠元素一起使用的有用方法列表。

方法 描述 示例

选项 - .collapse(options)

 将您的内容激活为可折叠元素。接受可选的选项对象。 
$('#identifier').collapse({
   toggle: false
})

切换 - .collapse('toggle')

 将可折叠元素切换到显示或隐藏。 
$('#identifier').collapse('toggle')

显示 - .collapse('show')

 显示可折叠元素。 
$('#identifier').collapse('show')

隐藏 - .collapse('hide')

 隐藏可折叠元素。 
$('#identifier').collapse('hide')

示例

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

实时演示 
<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>

事件

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

事件 描述 示例
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
})

示例

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

实时演示 
<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>
打印页面
上一页
下一页
广告