Bootstrap 折叠学习笔记

Bootstrap 的折叠组件可以让你展示或隐藏内容。当用户点击折叠标题时，相应的内容将会显示或隐藏。

基本用法

可以使用 data-toggle="collapse" 和 data-target="#xxx" 属性来实现折叠效果。

htmlCopy Code
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">点击我折叠/展开</button>

<div id="demo" class="collapse">
  <p>折叠/展开的内容</p>
</div>

在上面的例子中，点击按钮后，id 为 demo 的 div 中的内容将被展开或折叠。

手风琴效果

手风琴效果是指一次只能展开一项内容，其他内容则会自动折叠。Bootstrap 折叠组件提供了 data-parent="#xxx" 属性来实现手风琴效果。

htmlCopy Code
<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" data-parent="#accordion">
          折叠项1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
      <div class="card-body">
        折叠项1的内容
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" data-parent="#accordion">
          折叠项2
        </button>
      </h5>
    </div>

    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
      <div class="card-body">
        折叠项2的内容
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" data-parent="#accordion">
          折叠项3
        </button>
      </h5>
    </div>

    <div id="collapseThree" class="collapse" aria-labelledby="headingThree">
      <div class="card-body">
        折叠项3的内容
      </div>
    </div>
  </div>
</div>

JavaScript 控制

Bootstrap 的折叠组件还提供了一系列的 JavaScript 方法，以方便对折叠状态进行控制。

• .collapse(options) 初始化折叠组件。

• .collapse('toggle') 切换折叠状态。

• .collapse('show') 显示折叠内容。

• .collapse('hide') 隐藏折叠内容。

htmlCopy Code
<button onclick="$('.collapse').collapse('toggle')">切换折叠状态</button>