Bootstrap 折叠

定义和使用

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

<div class="container">
   <h2>简单可折叠</h2>
   <p>单击按钮可在显示和隐藏内容之间切换。</p>
   <button type ="button" class ="btn btn-primary" data-toggle ="collapse" data-target ="#demo">
    简单可折叠
   </button>
   <div id ="demo" class ="collapse">
       简单可折叠的内容简单可折叠的内容简单可折叠的内容
   </div>
</div>

尝试一下

输出结果如下：

简单可折叠的内容简单可折叠的内容简单可折叠的内容

示例说明：

.collapse 类指示可折叠元素（在我们的示例中为<div>）；这是将通过单击按钮显示或隐藏的内容。

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

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

<div class="container">
   <a href="#demo" data-toggle="collapse">折叠</a>
   <div id="demo" class="collapse">
       简单可折叠的内容简单可折叠的内容简单可折叠的内容
   </div>
</div>

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

<div class="container">
   <a href="#demo" data-toggle="collapse">折叠</a>
   <div id="demo" class="collapse show">
       简单可折叠的内容简单可折叠的内容简单可折叠的内容
   </div>
</div>

尝试一下

手风琴折叠

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

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

<div class="container">
  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          可折叠组项目#1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor坐镇，奉献己任，圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟，不要因抽烟而锻炼。
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
         可折叠组项目#2
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor坐镇，奉献己任，圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟，不要因抽烟而锻炼。
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
         可折叠组项目#3
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor坐镇，奉献己任，圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟，不要因抽烟而锻炼。
        </div>
      </div>
    </div>
  </div>
</div>

尝试一下

输出结果如下：

可折叠组项目#1

Lorem ipsum dolor坐镇，奉献己任，圣埃塞莫德临时工和劳动大臣。尽量不要抽烟，不要因抽烟而锻炼。

可折叠组项目#2

Lorem ipsum dolor坐镇，奉献己任，圣埃塞莫德临时工和劳动大臣。尽量不要抽烟，不要因抽烟而锻炼。

可折叠组项目#3

Lorem ipsum dolor坐镇，奉献己任，圣埃塞莫德临时工和劳动大臣。尽量不要抽烟，不要因抽烟而锻炼。

定义和使用

手风琴折叠

相关页面