在 Bootstrap 5 中，折叠（Collapse）组件用于隐藏和显示内容。通过点击一个触发元素（如按钮或链接），可以展开或折叠某个内容区域。常见的用法包括折叠菜单、面板或其他区域。

1. 基本折叠

折叠组件通过 data-bs-toggle="collapse" 属性和 data-bs-target 或 aria-controls 指定折叠目标来控制显示和隐藏。

示例：基本折叠

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

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    This content can be collapsed or expanded.
  </div>
</div>
  • data-bs-toggle="collapse"：使按钮成为触发折叠的元素。
  • data-bs-target="#collapseExample"：指定要折叠或展开的目标元素的 ID。
  • .collapse：折叠内容区域的类。
  • aria-expanded：控制元素是否已展开。

点击按钮后，ID 为 collapseExample 的 <div> 会展开或折叠。

2. 折叠多个元素

如果你希望多个元素能够同时折叠或展开，可以通过将这些元素放入一个父容器中，配合使用 .collapse 类来实现。

示例：多个折叠元素

<button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
  Toggle First Collapsible
</button>
<div class="collapse" id="collapseOne">
  <div class="card card-body">
    This is the first collapsible element.
  </div>
</div>

<button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  Toggle Second Collapsible
</button>
<div class="collapse" id="collapseTwo">
  <div class="card card-body">
    This is the second collapsible element.
  </div>
</div>

在这个例子中，你可以通过点击按钮切换每个折叠区域的显示和隐藏。

3. 折叠导航菜单

折叠常用于创建响应式导航菜单。你可以使用 navbar 组件中的折叠功能，以便在屏幕小的设备上隐藏导航菜单，点击按钮后展开。

示例：折叠导航菜单

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#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：创建可点击的折叠按钮。
  • data-bs-target="#navbarNav"：指定折叠区域的 ID。
  • .navbar-collapse：折叠的导航菜单区域。

这个导航菜单会在小屏幕设备（如手机）上折叠，并可以通过点击按钮展开。

4. 折叠动画效果

Bootstrap 5 自带的折叠组件支持动画效果。当内容展开或折叠时，显示和隐藏的过程是平滑过渡的。这使得折叠内容更加生动。

5. 自定义折叠触发

如果你需要通过 JavaScript 动态控制折叠，可以使用 Bootstrap 提供的 JavaScript API。

示例：通过 JavaScript 控制折叠

<button class="btn btn-warning" type="button" id="toggleButton">
  Toggle Collapse with JavaScript
</button>

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

<script>
  var collapseElement = document.getElementById('collapseContent');
  var toggleButton = document.getElementById('toggleButton');
  toggleButton.addEventListener('click', function() {
    var bsCollapse = new bootstrap.Collapse(collapseElement);
    bsCollapse.toggle();
  });
</script>
  • 通过 new bootstrap.Collapse() 创建一个折叠实例。
  • 使用 .toggle() 方法来切换折叠的状态。

6. 折叠的自定义样式

你可以根据需要为折叠区域添加自定义样式，例如背景颜色、边框等。

示例：自定义样式的折叠区域

<button class="btn btn-dark" type="button" data-bs-toggle="collapse" data-bs-target="#customCollapse" aria-expanded="false" aria-controls="customCollapse">
  Toggle Custom Collapse
</button>

<div class="collapse" id="customCollapse" style="background-color: #f0f0f0; padding: 10px;">
  <div class="card card-body">
    This is a custom-styled collapsible area.
  </div>
</div>
  • 通过在 style 中添加 CSS 样式来自定义折叠区域的外观。

7. 默认展开的折叠区域

如果你希望折叠区域在页面加载时默认展开，可以在折叠区域的 div 元素上添加 .show 类。

示例：默认展开的折叠区域

<button class="btn btn-danger" type="button" data-bs-toggle="collapse" data-bs-target="#defaultCollapse" aria-expanded="true" aria-controls="defaultCollapse">
  Default Opened Collapse
</button>

<div class="collapse show" id="defaultCollapse">
  <div class="card card-body">
    This content is visible by default.
  </div>
</div>
  • .show：使折叠区域默认展开。

总结

  • .collapse：折叠区域的类。
  • data-bs-toggle="collapse"：使按钮触发折叠效果。
  • data-bs-target="#..."：指定要折叠的目标区域。
  • .show：使折叠区域默认展开。
  • .navbar-toggler：折叠导航菜单的触发按钮。
  • .navbar-collapse：折叠的导航菜单区域。

Bootstrap 5 的折叠组件非常适用于各种需要隐藏/显示内容的场景，提供了丰富的功能和灵活性。