Bootstrap：手风琴不会自动折叠之前打开的面板

1个回答

盲仔呢

2025-12-10 07:57

Meta
Meta

使用Bootstrap时，我们经常会遇到需要在网页上添加手风琴效果的需求。手风琴是一种可以展开和折叠内容的组件，通常用于显示一组相关的信息，如常见的Frequently Asked Questions（FAQs）页面。然而，有时我们希望手风琴在展开一个面板时，自动折叠之前打开的面板，以保持页面的整洁和易读性。本文将介绍如何使用Bootstrap实现手风琴效果，并解决手风琴不会自动折叠之前打开的面板的问题。

案例代码：

html
<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/CSS/bootstrap.min.CSS">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.JS"></script>
  <script src="https://cdn.JSdelivr.net/npm/@popperJS/core@2.9.1/dist/umd/popper.min.JS"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/JS/bootstrap.min.JS"></script>
  <title>Bootstrap 手风琴</title>
</head>
<body>
  <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">
            面板1
          </button>
        </h5>
      </div>
      <div id="collapSEOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          这是面板1的内容。
        </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">
            面板2
          </button>
        </h5>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
        <div class="card-body">
          这是面板2的内容。
        </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">
            面板3
          </button>
        </h5>
      </div>
      <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
        <div class="card-body">
          这是面板3的内容。
        </div>
      </div>
    </div>
  </div>
</body>
</html>

解决手风琴不会自动折叠之前打开的面板的问题

在默认情况下，Bootstrap的手风琴组件会保持之前打开的面板展开，不会自动折叠。然而，我们可以通过一些自定义的JavaScript代码来实现手风琴的自动折叠功能。

首先，我们需要在页面中引入Bootstrap的JavaScript文件，包括jQuery和Popper.JS的库文件。然后，我们可以在手风琴组件的外层容器上添加一个data-attribute，并设置其值为true，以启用手风琴的自动折叠功能。

在上面的案例代码中，我们可以看到手风琴组件的外层容器是一个

元素，其id属性值为"accordion"。我们可以在该元素上添加data-attribute，如下所示：

html
<div id="accordion" data-allow-toggle="true">
  <!-- 手风琴内容 -->
</div>

这样，手风琴就会在展开一个面板时，自动折叠之前打开的面板。这样可以确保页面的整洁和易读性，让用户更好地浏览和阅读内容。

通过简单的自定义JavaScript代码，我们可以解决Bootstrap手风琴不会自动折叠之前打开的面板的问题。我们只需在手风琴组件的外层容器上添加一个data-attribute，并设置其值为true，即可实现手风琴的自动折叠功能。这将为用户提供更好的浏览和阅读体验，并使页面看起来更加整洁和易读。

举报有用（0）分享收藏

Bootstrap：手风琴不会自动折叠之前打开的面板

1个回答

盲仔呢

热门话题

相关问题