Bootstrap JS Collapse 插件

JS Collapse (collapse.js)

为手风琴式菜单和导航等可折叠组件提供基本样式和灵活支持。

插件依赖性：Collapse 要求在你的 Bootstrap 版本中包含 transitions 插件。

学习更多的 Collapse 知识, 请访问本站的 Bootstrap 可折叠教程.

Collapse 插件样式

通过 data-* 属性

只需要给元素添加 data-toggle="collapse" 和 data-target，就可用将其变成折叠。data-target 属性接受一个 CSS 选择器来应用到折叠元素。所以确保将 collapse 样式添加到可折叠元素中。

实例

<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>

提示：要将可折叠控件变成手风琴样式，请添加数据属性 data-parent="#selector"。

通过 JavaScript

手动:

 $('.collapse').collapse()

Collapse Options

Options 可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-，如 data-parent=""。

Collapse 方法

下表列出了所有可用的 Collapse 折叠方法。

Collapse 事件

下表列出了所有可用的 Collapse 事件。

更多实例

简单的折叠

下面的实例使用按钮切换另一个元素的展开和折叠内容:

实例

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
 Simple collapsible
</button>
<div id="demo" class="collapse in">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
 nisi ut aliquip ex ea commodo consequat.
 </div>

折叠面板

以下实例显示了一个可折叠面板:

实例

<div class="panel-group">
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
    <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
   </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse">
   <div class="panel-body">Panel Body</div>
   <div class="panel-footer">Panel Footer</div>
  </div>
 </div>
</div>

折叠列表组

下面显示了一个可折叠面板，其中包含一个列表组:

实例

<div class="panel-group">
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
    <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
   </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse">
   <ul class="list-group">
    <li class="list-group-item">One</li>
    <li class="list-group-item">Two</li>
    <li class="list-group-item">Three</li>
   </ul>
   <div class="panel-footer">Footer</div>
  </div>
 </div>
</div>

Accordion 手风琴

下面的实例通过扩展面板组件显示了一个简单的手风琴:

注意：data-parent 属性确保在显示一个可折叠项时，指定父项下的所有可折叠元素都将关闭。

实例

<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="#collapse1">
    Collapsible Group 1</a>
   </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse in">
   <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
   minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
   commodo consequat.</div>
  </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
    Collapsible Group 2</a>
   </h4>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
   <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
   minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
   commodo consequat.</div>
  </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
    Collapsible Group 3</a>
   </h4>
  </div>
  <div id="collapse3" class="panel-collapse collapse">
   <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
   minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
   commodo consequat.</div>
  </div>
 </div>
</div>

展开与折叠切换图标 & 文本

以下实例在打开和关闭可折叠内容时更改打开/关闭文本和图标:

实例

$(document).ready(function(){
 $("#demo").on("hide.bs.collapse", function(){
  $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
 });
 $("#demo").on("show.bs.collapse", function(){
  $(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
 });
 });

或您使用 CSS:

实例

/* Icon when the collapsible content is shown */
.btn:after {
 font-family: "Glyphicons Halflings";
 content: "\e114";
}
/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
 content: "\e080";
}