Bootstrap5 折叠

Bootstrap 5 提供了一个方便的折叠插件，可以用来创建可隐藏和显示的内容区域。这种功能在页面设计中非常常见，比如在 FAQ 页面、信息面板等场景下使用。通过这个插件，我们可以轻松实现这些需求。

如何使用折叠插件

首先，确保你已经在项目中引入了Bootstrap 5的相关文件。这包括CSS文件和JS文件。如果还没有，请按照以下方式引入：

<!-- 引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入Bootstrap JS以及依赖jQuery和Popper.js -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

创建基本的折叠组件

折叠组件通常由一个触发器（按钮或链接）和一个目标内容区域组成。使用data-bs-toggle="collapse"属性来指定哪个元素是触发器，并且需要给目标内容区域添加一个id，这个id应该与触发器上的data-bs-target属性值匹配。

HTML示例

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#example">点击展开</button>

<div id="example" class="collapse">
    <div class="card card-body">
        这是一个可以被折叠的内容区域。
    </div>
</div>

在这个例子中，当你点击“点击展开”按钮时，id为example的<div>元素将会展开或收起。

控制多个折叠项

如果你想在一个页面上控制多个独立的折叠项，只需分别为每个折叠项分配不同的id，并相应地调整触发器的data-bs-target属性即可。

HTML示例

// www.javascriptcn.com code example
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#example1">点击展开第一个</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#example2">点击展开第二个</button>

<div id="example1" class="collapse">
    <div class="card card-body">
        第一个折叠内容区域。
    </div>
</div>

<div id="example2" class="collapse">
    <div class="card card-body">
        第二个折叠内容区域。
    </div>
</div>

使用折叠插件API

除了简单的HTML设置之外，你还可以通过JavaScript直接调用折叠插件的方法来控制折叠行为。

JavaScript示例

var exampleButton = document.querySelector('#example-button')
var exampleCollapse = document.querySelector('#example')

exampleButton.addEventListener('click', function () {
    exampleCollapse.classList.toggle('show');
});

这里我们通过监听按钮的点击事件来手动切换折叠状态。classList.toggle('show')方法会根据当前状态切换show类，从而实现展开或收起的效果。

自定义样式

你可以通过自定义CSS来改变折叠组件的外观。例如，你可以修改背景颜色、字体大小等。

CSS示例

.collapse .card-body {
    background-color: #f8f9fa;
    color: #343a40;
}

以上就是Bootstrap 5折叠插件的基本使用方法。通过合理运用这一功能，你可以极大地丰富你的Web页面交互性和用户体验。