崩溃插件可以轻松折叠页面的分割.无论您是使用它来构建手风琴导航还是内容框，它都允许有很多内容选项.
如果您想单独包含此插件功能，那么您将需要 collapse.js 的.这还需要将 Transition Plugin 包含在您的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 或数据目标属性被添加到父组件，其值为子组件的 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>
As you can see in the example we have created a simple collapsible component, unlike accordion, we haven't added the attribute data-parent.
下表列出了崩溃插件用于处理繁重的类;
| Class | Description |
|---|---|
| .collapse | Hides the content. |
| .collapse.in | Shows the content. |
| .collapsing | Is added when the transition starts, and removed when it finishes. |
您可以通过两种方式使用折叠插件:
通过数据属性＆minus; 将data-toggle ="collapse"和数据目标添加到元素以自动分配对可折叠元素的控制。 data-target属性将接受CSS选择器以应用折叠。 请务必将类.collapse添加到collapsible元素。 如果您希望它默认打开，请包含其他类.in。
要将类似手风琴的组管理添加到可折叠控件，请添加数据属性data-parent ="＃selector"。
通过JavaScript,可以使用JavaScript激活折叠方法，如下所示
$('.collapse').collapse()有些选项可以通过数据属性传递，或者JavaScript列在下表中:
| Option Name | Type/Default Value | Data attribute name | Description |
|---|---|---|---|
| parent | selector Default − false | data-parent | If selector is false, then all collapsible elements under the specified parent will be closed (similar to traditional accordion behavior - this dependent on the accordion-group class). |
| toggle | boolean Default − true | data-toggle | Toggles the collapsible element on invocation. |
以下是与可折叠元素一起使用的一些有用方法的列表。
| Method | Description | Example |
|---|---|---|
Options − .collapse(options) | Activates your content as a collapsible element. Accepts an optional options object. | $('#identifier').collapse({
toggle: false
}) |
Toggle − .collapse('toggle') | Toggles a collapsible element to shown or hidden. | $('#identifier').collapse('toggle') |
Show − .collapse('show') | Shows a collapsible element. | $('#identifier').collapse('show') |
Hide − .collapse('hide') | Hides a collapsible element. | $('#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>下表列出了可与折叠功能一起使用的一些事件。
| Event | Description | Example |
|---|---|---|
| show.bs.collapse | Fired after the show method is called. | $('#identifier').on('show.bs.collapse', function () {
// do something
}) |
| shown.bs.collapse | This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). | $('#identifier').on('shown.bs.collapse', function () {
// do something
}) |
| hide.bs.collapse | Fired when the hide instance method has been called. | $('#identifier').on('hide.bs.collapse', function () {
// do something
}) |
| hidden.bs.collapse | This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). | $('#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>
