什么是折叠组件？
折叠（Collapse）是Bootstrap 5中的一个JavaScript插件，用于显示和隐藏内容。
通过折叠组件，您可以：
- 创建可展开/折叠的内容区域
- 构建手风琴式菜单
- 实现多目标内容控制
- 添加平滑的过渡动画
折叠组件不需要任何自定义JavaScript代码，只需使用data属性即可实现功能。
折叠效果演示
这是一个折叠内容的示例。点击按钮可以显示或隐藏此内容。
折叠组件提供了平滑的过渡动画，使界面更加友好。
点击上方按钮查看折叠效果。
基本用法
按钮触发折叠
使用按钮控制折叠内容的显示和隐藏：
这是一些占位内容，用于折叠组件演示。它默认是隐藏的，直到通过按钮显示。
它通过JavaScript实现平滑的过渡动画。
<button class="btn btn-primary" type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseExample">
点击切换内容
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
这是一些占位内容，用于折叠组件演示。它默认是隐藏的，直到通过按钮显示。
它通过JavaScript实现平滑的过渡动画。
</div>
</div>链接触发折叠
使用链接控制折叠内容的显示和隐藏：
这是通过链接触发的折叠内容。点击上方的链接可以显示或隐藏此内容。
折叠组件支持多种触发方式。
<a class="btn btn-primary" data-bs-toggle="collapse"
href="#collapseExample2" role="button">
点击链接切换内容
</a>
<div class="collapse" id="collapseExample2">
<div class="card card-body">
这是通过链接触发的折叠内容。点击上方的链接可以显示或隐藏此内容。
折叠组件支持多种触发方式。
</div>
</div>默认展开的内容
使用 .show 类使折叠内容默认展开：
这个折叠内容默认是展开的，因为添加了
.show 类。
点击按钮可以隐藏或再次显示此内容。
<button class="btn btn-primary" type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseExample3">
切换内容
</button>
<div class="collapse show" id="collapseExample3">
<div class="card card-body">
这个折叠内容默认是展开的，因为添加了 .show 类。
点击按钮可以隐藏或再次显示此内容。
</div>
</div>多目标控制
使用一个按钮控制多个折叠内容：
第一个折叠内容区域。
第二个折叠内容区域。
<button class="btn btn-primary" type="button"
data-bs-toggle="collapse"
data-bs-target=".multi-collapse">
切换多个内容
</button>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
第一个折叠内容区域。
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
第二个折叠内容区域。
</div>
</div>
</div>
</div>手风琴效果
手风琴是折叠组件的一种特殊用法，可以创建互斥的内容区域：
这是第一个手风琴项目的内容。 它默认是展开的，因为添加了
.show 类。
手风琴允许同时只展开一个项目，当您展开另一个项目时，当前展开的项目会自动关闭。
这是第二个手风琴项目的内容。 它默认是隐藏的，直到您点击标题展开。
手风琴效果通过
data-bs-parent 属性实现，该属性将所有折叠项目分组。
这是第三个手风琴项目的内容。 手风琴是组织和展示相关内容的绝佳方式，
特别是当您有多个内容部分但只想一次显示一个时。
<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">
手风琴项目 #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
data-bs-parent="#accordionExample">
<div class="accordion-body">
这是第一个手风琴项目的内容。
</div>
</div>
</div>
<!-- 更多手风琴项目 -->
</div>JavaScript方法
手动控制折叠
除了使用data属性，您还可以通过JavaScript控制折叠组件：
这个折叠内容通过JavaScript控制。点击上方的按钮可以切换、显示或隐藏此内容。
// 获取折叠实例
var myCollapse = new bootstrap.Collapse(document.getElementById('jsCollapseExample'))
// 切换折叠状态
document.getElementById('toggleButton').addEventListener('click', function () {
myCollapse.toggle()
})
// 显示内容
document.getElementById('showButton').addEventListener('click', function () {
myCollapse.show()
})
// 隐藏内容
document.getElementById('hideButton').addEventListener('click', function () {
myCollapse.hide()
})事件处理
折叠组件提供了事件监听功能，可以在折叠状态变化时执行代码：
这个折叠内容会触发事件。查看浏览器控制台可以看到事件日志。
var myCollapse = document.getElementById('eventCollapseExample')
myCollapse.addEventListener('show.bs.collapse', function () {
console.log('折叠内容开始显示')
})
myCollapse.addEventListener('shown.bs.collapse', function () {
console.log('折叠内容完全显示')
})
myCollapse.addEventListener('hide.bs.collapse', function () {
console.log('折叠内容开始隐藏')
})
myCollapse.addEventListener('hidden.bs.collapse', function () {
console.log('折叠内容完全隐藏')
})最佳实践
选择合适的触发器
- 使用按钮或链接作为折叠触发器
- 确保触发器元素具有
data-bs-toggle="collapse"属性 - 使用
data-bs-target或href指向折叠内容 - 为可访问性添加适当的ARIA属性
设计考虑
- 为折叠内容提供清晰的视觉指示
- 考虑在折叠标题中使用图标表示状态
- 确保折叠内容在展开时有足够的空间
- 测试折叠组件在各种设备上的表现
可访问性
- 为折叠触发器添加适当的ARIA属性
- 使用
aria-expanded表示状态 - 使用
aria-controls关联触发器与内容 - 确保键盘导航正常工作
性能优化
- 避免在折叠内容中放置过多大型资源
- 考虑使用懒加载技术加载折叠内容
- 限制同时展开的折叠项目数量
- 在移动设备上测试性能表现