W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap JS 折叠



JS 折叠 (collapse.js)

获取基本样式和对折叠组件(如折叠和导航)的灵活支持。

插件依赖:折叠需要转换插件包含在您的Bootstrap版本中。

有关Collapsibles的教程,请阅读我们的 Bootstrap Collapse教程


折叠插件类

描述 实例
.collapse 隐藏内容 测 试
.collapse in 显示内容 测 试
.collapsing 在转换开始时添加,并在完成时删除 测 试

通过 data-*属性 触发

向元素添加 data-toggle="collapse" 和 data-target,自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器,并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的,请添加额外的 class .in。

<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Some text..
</div> 测 试

提示:为了向可折叠控件添加类似折叠面板的分组管理,请添加 data 属性 data-parent="#selector"。


通过 JavaScript 触发

手动启用:

$('.collapse').collapse()

选项s

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:

名称 类型 默认值 描述
parent selector false 如果提供了一个选择器,当可折叠项目显示时,指定父元素下的所有可折叠的元素将被关闭。这与创痛的折叠面板(accordion)的行为类似 - 这依赖于 accordion-group 类
toggle boolean true 切换调用可折叠元素

方法

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

方法 描述 实例
.collapse(options) 激活内容为可折叠元素。接受一个可选的 options 对象
.collapse("toggle") 切换显示/隐藏可折叠元素 测 试
.collapse("show") 显示可折叠元素 测 试
.collapse("hide") 隐藏可折叠元素 测 试

事件

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

事件 描述 实例
show.bs.collapse 在调用 show 方法后触发该事件 测 试
shown.bs.collapse 当折叠元素对用户可见时触发该事件(将等待 CSS 过渡效果完成) 测 试
hide.bs.collapse 当调用 hide 实例方法时立即触发该事件 测 试
hidden.bs.collapse 当折叠元素对用户隐藏时触发该事件(将等待 CSS 过渡效果完成) 测 试

Examples

更多实例

简单可折叠

以下实例创建一个按钮切换其他元素的展开和折叠内容:

Example

<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>
尝试一下 »

可折叠面板

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

Example

<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>
尝试一下 »

可折叠列表组

下面显示了一个带有列表组的可折叠面板:

Example

<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>
尝试一下 »

手风琴

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

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="#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>
尝试一下 »

展开和折叠切换图标&amp;文本

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

Example

$(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:

Example

/* 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";
}
尝试一下 »