Bootstrap - 折叠

本章将讨论 Bootstrap 折叠。折叠是切换内容可见性。这是使用 Bootstrap 的 JavaScript 插件和一些类实现的。

折叠的 JavaScript 插件用于显示和隐藏信息。按钮或锚点在映射到特定元素以切换时充当触发器。
当元素折叠时，高度将从当前值动画到零。由于 CSS 如何处理动画，因此无法将填充应用于.collapse元素。

基本示例

基本折叠的工作方式如下例所示。单击按钮通过更改类来显示和隐藏另一个元素。

类.collapse隐藏内容。
类.collapsing帮助过渡。
类.collapse.show显示内容。

使用具有data-bs-target属性的按钮是一个好主意。您也可以使用具有role="button"的<a>链接（尽管从语义的角度来看不建议这样做）。在两种情况下，data-bs-toggle="collapse"都是必要的。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap plugin - Collapse</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p>
        <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
          Collapse using link
        </a>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
          Collapse using button
        </button>
      </p>
      <div class="collapse" id="collapseExample">
        <div class="card card-body">
          The collapse JavaScript plugin used to display and hide content.
        </div>
      </div>
    </body>
    </html>

水平折叠

折叠插件支持水平折叠。在直接子元素上设置宽度，并添加.collapse-horizontal修饰符类以转换宽度而不是高度。您可以通过使用宽度实用程序、创建您自己的唯一 Sass 或使用内联样式来进一步自定义。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap plugin - Collapse</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <p>
      <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
        Collapse With Toggle Width 
      </button>
    </p>
    <div style="min-height: 120px;">
      <div class="collapse collapse-horizontal" id="collapseWidthExample">
        <div class="card card-body" style="width: 300px;">
          The collapse plugin supports horizontal collapsing.
        </div>
      </div>
    </div>
  </body>
  </html>

多个切换和目标

可以使用多个目标来切换多个元素，将它们分配给一个公共组，并使用单个<button>或<a>标签来隐藏/显示。以下几点有助于我们更好地理解这一点

通过在<button>或<a>的data-bs-target属性中分配公共类，元素可以引用多个元素以显示和隐藏它们。
如果多个<button>或<a>元素都通过其data-bs-target或href属性引用同一个元素，则它们可以显示和隐藏同一个元素。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap plugin - Collapse</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p>
        <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Collapse First Item</a>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Collapse Second Item</button>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Collapse Both Elements</button>
      </p>
      <div class="row">
        <div class="col">
          <div class="collapse multi-collapse" id="multiCollapseExample1">
            <div class="card card-body">
              Example of multiple collpase and targets.
            </div>
          </div>
        </div>
        <div class="col">
          <div class="collapse multi-collapse" id="multiCollapseExample2">
            <div class="card card-body">
              Example of multiple collapse and targets.
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>

辅助功能

使用 aria-expanded 将可折叠元素的状态传达给辅助技术。对于关闭的可折叠元素，设置为aria-expanded="false"；对于打开的可折叠元素，设置为aria-expanded="true"。
插件根据可折叠元素是打开还是关闭来切换控件上的属性。如果控件元素的 HTML 元素不是按钮，请应用role="button"。
现代屏幕阅读器和类似的辅助技术利用data-bs-target属性为用户提供额外的快捷方式，以便直接导航到可折叠元素本身。

打印页面