Bootstrap:当一个区段展开时，折叠其他区段

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。它提供了丰富的组件和工具，使得开发者能够轻松地创建复杂的用户界面。其中，折叠（Collapse）组件是 Bootstrap 中的一个常用组件，用于实现内容的展开和折叠效果。

类型

Bootstrap 的折叠组件主要有以下几种类型：

手风琴（Accordion）：多个折叠面板，每次只能展开一个。
导航栏（Navbar）：用于创建响应式导航栏，其中某些菜单项可以折叠。
面板（Panel）：独立的折叠面板，可以单独控制展开和折叠。

应用场景

折叠组件广泛应用于各种需要隐藏和显示内容的场景，例如：

导航菜单：在小屏幕设备上，导航菜单可以折叠成一个按钮，点击按钮展开菜单。
详细信息展示：在列表或表格中，点击某个项目可以展开显示详细信息。
表单验证：在表单提交前，可以折叠显示验证错误信息。

问题及解决方法

当一个区段展开时，折叠其他区段的问题通常出现在手风琴组件中。默认情况下，Bootstrap 的手风琴组件并不自动折叠其他区段，需要手动实现这一功能。

原因

Bootstrap 的手风琴组件默认情况下只是简单地切换当前区段的展开和折叠状态，并不会自动折叠其他区段。

解决方法

可以通过 JavaScript 来实现这一功能。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Accordion</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="accordion" id="accordionExample">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 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>
          </h5>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Group Item #2
            </button>
          </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

在这个示例中，data-parent="#accordionExample" 属性确保了当一个区段展开时，其他区段会自动折叠。