以下是关于 Bootstrap 5 折叠（Collapse） 的详细指南，包含目录、内部锚链接、出站链接和参考资料。我将从基本概念、使用方法到高级功能逐一讲解，帮助您快速掌握 Collapse 的使用。
Bootstrap 5 折叠（Collapse）指南
目录
什么是 Collapse
Collapse 是 Bootstrap 5 提供的一种交互组件，用于在用户点击触发器时显示或隐藏内容区域。它常用于 FAQ、手风琴菜单或节省页面空间的场景，基于 JavaScript 实现平滑的展开和收起效果。
出站链接：查看 Bootstrap 5 Collapse 官方文档。
基本使用
HTML 结构
Collapse 使用 .collapse 类定义隐藏内容，通过触发器（如按钮）控制显示状态。
示例代码：
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
切换内容
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
这里是折叠的内容区域。
</div>
</div>
.collapse：定义可折叠的内容。data-bs-toggle="collapse"：启用折叠功能。data-bs-target：指定折叠区域的id。aria-expanded和aria-controls：提升可访问性。
触发 Collapse
默认情况下，内容是隐藏的，点击触发器后展开。可以通过 data-bs-toggle 属性直接控制。
高级用法
多个目标
一个触发器可以控制多个折叠区域。
示例代码：
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false">
切换多个内容
</button>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="collapse1">
<div class="card card-body">内容 1</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="collapse2">
<div class="card card-body">内容 2</div>
</div>
</div>
</div>
.multi-collapse：通过类名关联多个目标。
手风琴效果
通过 .accordion 类实现手风琴效果，确保同一时间只有一个面板展开。
示例代码：
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
面板 1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
面板 1 的内容。
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
面板 2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
面板 2 的内容。
</div>
</div>
</div>
</div>
.accordion：手风琴容器。data-bs-parent：确保只有一个面板展开。
自定义样式
通过 CSS 调整折叠内容的外观。
示例代码：
<style>
.custom-collapse .card-body {
background-color: #f8f9fa;
border: 1px solid #007bff;
}
</style>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#customCollapse">
切换自定义内容
</button>
<div class="collapse custom-collapse" id="customCollapse">
<div class="card card-body">
自定义样式的内容。
</div>
</div>
JavaScript 控制
通过 JavaScript 动态控制折叠状态。
示例代码：
const collapse = new bootstrap.Collapse(document.getElementById('collapseExample'));
collapse.show(); // 显示内容
collapse.hide(); // 隐藏内容
collapse.toggle(); // 切换状态
// 监听事件
document.getElementById('collapseExample').addEventListener('shown.bs.collapse', function () {
console.log('内容已展开');
});
出站链接：参考 Bootstrap 5 Collapse 方法。
注意事项
- 依赖性：Collapse 需要 Bootstrap 的 JavaScript 文件（
bootstrap.bundle.min.js）。 - 可访问性：确保使用 ARIA 属性（如
aria-expanded和aria-controls）。 - 动画性能：大量折叠内容可能影响页面性能，建议优化内容量。
- 嵌套折叠：避免深度嵌套，可能导致交互复杂性增加。
参考资料
以下是与 Bootstrap 5 Collapse 相关的外部资源：
- Bootstrap 5 官方文档 – Collapse
- Bootstrap 5 官方文档 – Accordion
- MDN Web Docs – ARIA 属性
- W3Schools – Bootstrap 5 Collapse 教程
总结
Bootstrap 5 的 Collapse 组件是一个灵活的工具，支持简单的折叠切换和复杂的手风琴效果。通过简单的类和 JavaScript 控制，您可以实现动态的内容展示。如果您有具体问题或场景，请随时告诉我！
发表回复