Bootstrap .collapse

基本可折叠

当您想要隐藏和显示大量内容时，可折叠内容非常有用：

Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat.

示例

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

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

亲自试一试 »

示例解释

这个.collapseclass 表示可折叠元素（在我们的示例中为 <div>）；这是单击按钮即可显示或隐藏的内容。

要控制（显示/隐藏）可折叠内容，请添加data-toggle="collapse"<a> 或 <button> 元素的属性。然后添加data-target="#id"属性将按钮与可折叠内容连接起来 (<div id="demo">)。

笔记：对于 <a> 元素，您可以使用href属性而不是data-target属性：

示例

<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

亲自试一试 »

默认情况下，可折叠内容是隐藏的。但是，您可以添加.in默认显示内容的类：

示例

<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</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>

亲自试一试 »

手风琴

可折叠组 1

可折叠组 2

可折叠组 3

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

笔记：使用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>

亲自试一试 »

完整的 Bootstrap 折叠参考

有关所有折叠选项、方法和事件的完整参考，请访问我们的Bootstrap JS 折叠参考。