在 Bootstrap 4 中，折叠（Collapse）组件允许你在页面上动态显示和隐藏内容。它通常用于创建折叠面板、导航栏等，能够提供更好的空间利用和用户体验。

1. 基本折叠示例

最简单的折叠示例可以通过一个按钮触发折叠内容的显示和隐藏。

示例：

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Toggle Collapse
</button>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    This content is collapsible!
  </div>
</div>

解释：

  • data-toggle="collapse"：这是折叠组件的触发器，点击按钮时，内容会展开或收起。
  • data-target="#collapseExample"：指定要折叠/展开的目标内容，目标是一个具有 collapse 类的元素。
  • aria-expanded：标识折叠内容的展开状态，初始值是 false。
  • aria-controls：指定被折叠的元素 ID。

2. 折叠多个元素

如果你有多个折叠内容，需要为每个折叠元素设置唯一的 ID。

示例：

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
  Toggle First Collapse
</button>
<div class="collapse" id="collapseOne">
  <div class="card card-body">
    First collapsible content.
  </div>
</div>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  Toggle Second Collapse
</button>
<div class="collapse" id="collapseTwo">
  <div class="card card-body">
    Second collapsible content.
  </div>
</div>

解释：

  • 每个按钮都有不同的 data-target 和 id，从而控制不同的折叠内容。

3. 折叠在导航栏中使用

折叠组件常用于响应式导航栏，当屏幕尺寸较小时，导航栏会自动折叠成一个菜单按钮。

示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

解释：

  • navbar-toggler：按钮，用于触发折叠菜单的显示和隐藏。
  • navbar-collapse：包含菜单项的部分，当屏幕尺寸较小时，会折叠起来。
  • collapse：控制折叠状态。

4. 自动折叠与展开

你可以在页面加载时使某个折叠元素默认展开，方法是给折叠元素添加 show 类。

示例：

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Toggle Collapse
</button>

<div class="collapse show" id="collapseExample">
  <div class="card card-body">
    This content is expanded by default!
  </div>
</div>

解释：

  • show 类使折叠内容默认展开。

5. 折叠动画效果

Bootstrap 4 会自动为折叠内容提供平滑的过渡动画，使折叠/展开过程看起来更流畅。

6. 折叠多个面板

有时你可能希望多个面板可以独立折叠。此时你可以通过 data-parent 属性来确保只有一个面板在同一时间内展开。

示例：

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Content for item #1.
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Content for item #2.
      </div>
    </div>
  </div>
</div>

解释：

  • data-parent="#accordionExample"：确保同一时间只有一个面板可以展开。

7. 程序化控制折叠

如果你需要通过 JavaScript 程序化控制折叠，你可以使用 jQuery 方法 collapse('toggle')、collapse('show') 或 collapse('hide') 来展开或收起折叠内容。

示例：

<button class="btn btn-primary" id="toggleButton">Toggle Collapse</button>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    This content can be toggled.
  </div>
</div>

<script>
  $("#toggleButton").click(function() {
    $("#collapseExample").collapse('toggle');
  });
</script>

解释：

  • collapse('toggle')：切换折叠状态（展开或收起）。
  • collapse('show')：展开折叠。
  • collapse('hide')：收起折叠。

总结

  • 基本折叠：使用 data-toggle="collapse" 和 data-target 来触发折叠和展开。
  • 响应式导航栏折叠：使用折叠组件来创建响应式导航栏。
  • 自动展开：通过给折叠元素添加 show 类来使其默认展开。
  • 折叠面板组：使用 data-parent 来确保同一时间只有一个面板展开。
  • 程序化控制：使用 jQuery 方法来控制折叠内容。

Bootstrap 4 的折叠组件非常灵活，可以帮助你构建多种互动效果。希望这些示例能帮助你更好地使用折叠组件！如果有更多问题，随时提问！