Bootstrap每天必学之折叠

折叠是 Bootstrap 中非常实用的一个组件，它能够让页面上的内容通过二次点击等交互方式展开或隐藏。本篇就来详细讲解 Bootstrap 折叠组件的使用方法。

折叠组件的基本用法

HTML 结构

折叠组件的基础结构需要三个元素，分别是触发折叠的按钮，折叠的内容和容器元素。这里的按钮可以是一个普通按钮或者是一个链接。

以下是折叠组件基本使用的 HTML 结构：

<div class="container">
  <button class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample">触发折叠</button>
  <div class="collapse" id="collapseExample">
    <p>这里是要展开的内容</p>
  </div>
</div>

在上述结构中，按钮添加了 data-toggle 和 data-target 两个属性。data-toggle 属性指定了触发折叠的方式，可以是 click、hover 等事件。data-target 属性指定了要进行折叠的元素，这里填写的是内容元素的 ID，为 collapseExample。

内容元素的结构如下：

<div class="collapse" id="collapseExample">
  <p>这里是要展开的内容</p>
</div>

需要和按钮的 data-target 属性对应。

JavaScript 引入

折叠组件依赖于 Bootstrap 的 JavaScript 插件，请确保在页面中引入了 Bootstrap 的 JavaScript 文件（可以通过 CDN 引入）。

<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

示例

下面这个示例演示了一个基本的折叠组件，展开按钮和内容元素需对应。

触发折叠

这里是要展开的内容

折叠组件的选项配置

折叠组件还提供了多个选项供我们控制展示效果，主要有以下五个选项：

1. transitioning，转换时启用动画效果；
2. parent，将折叠事件绑定在父级元素上；
3. toggle，指示是否在单个按钮上反转折叠状态；
4. target，指定要折叠的内容；
5. toggleClass，指示 toggle 链接上标志当前状态的 CSS 类。

我们可以通过在触发器元素上添加 data- 开头的自定义属性来设置选项，比如 data-parent、data-toggle、data-target 等等。

示例一

下面这个示例配置了 toggle 选项为 false，设置为手动切换。

<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" aria-expanded="true" aria-controls="collapseOne" data-toggle="false">
          折叠一
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        这里是要展开的内容
      </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" aria-expanded="false" aria-controls="collapseTwo" data-toggle="false">
          折叠二
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        这里是要展开的内容
      </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" aria-expanded="false" aria-controls="collapseThree" data-toggle="false">
          折叠三
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        这里是要展开的内容
      </div>
    </div>
  </div>
</div>

上述代码中，我们在每个 button 中添加了 data-toggle="false" 属性，使得折叠状态只能手动切换。

示例二

下面这个示例演示了如何自定义展开/折叠的 Class。

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo" data-toggle-class="active">
  查看更多
</button>

<div id="demo" class="collapse">
  这里是要展开的内容
</div>

我们在 button 中添加了 data-toggle-class 属性，并设置为 active。接着，在 CSS 文件中自定义该类的样式即可。

.btn.active {
  background-color: #fff;
  color: #000;
}

结语

了解了折叠组件之后，相信大家可以很快开始使用它并能够很好地优化页面交互效果。通过上述示例，我们可以更清晰地理解 Bootstrap 折叠组件的基本用法和进阶选项的配置方法。