Bootstrap 5 折叠组件完全指南
面向初学者的通俗易懂折叠组件知识汇总
折叠（Collapse）是Bootstrap提供的一个UI组件，允许你点击按钮或链接来显示和隐藏内容。
1 核心思想：点击一个元素（通常是按钮），另一个元素（内容区域）会展开或收起。
2 使用场景：
- 常见问题解答（FAQ）页面
- 产品详情展开
- 隐藏复杂选项或表单
- 创建手风琴菜单
3 优点：
- 节省页面空间
- 提高用户体验
- 内容组织更清晰
- 无需JavaScript即可实现基本功能
通俗解释： 就像抽屉一样，点击按钮抽屉拉开（内容显示），再点一次抽屉关闭（内容隐藏）
创建一个折叠组件需要两个主要元素：触发器和折叠内容区
1 创建触发器按钮：
<button class=”btn btn-primary”
type=”button”
data-bs-toggle=”collapse”
data-bs-target=”#collapseExample”>
点击显示/隐藏内容
</button>
type=”button”
data-bs-toggle=”collapse”
data-bs-target=”#collapseExample”>
点击显示/隐藏内容
</button>
关键属性说明：
- data-bs-toggle=”collapse”：告诉Bootstrap这是一个折叠触发器
- data-bs-target=”#collapseExample”：指定要控制哪个折叠区域（#后面是目标元素的ID）
2 创建折叠内容区：
<div class=”collapse” id=”collapseExample”>
<div class=”card card-body”>
这里是可折叠的内容区域，点击按钮时我会显示或隐藏！
</div>
</div>
<div class=”card card-body”>
这里是可折叠的内容区域，点击按钮时我会显示或隐藏！
</div>
</div>
关键属性说明：
- class=”collapse”：表示这是一个折叠内容区，初始状态是隐藏的
- id=”collapseExample”：ID必须与按钮的data-bs-target属性匹配
实际效果：
🎉 成功！你现在看到的是折叠内容区。
再次点击按钮我会消失哦～
手风琴效果是指一组折叠面板中，同时只能展开一个面板。
1 使用.accordion作为容器
2 每个折叠项包含在.accordion-item中
3 使用data-bs-parent属性将所有项连接到同一个手风琴
<div class=”accordion” id=”accordionExample”>
<div class=”accordion-item”>
<h2 class=”accordion-header”>
<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”>
内容1…
</div>
</div>
</div>
<div class=”accordion-item”>
…类似结构…
</div>
</div>
<div class=”accordion-item”>
<h2 class=”accordion-header”>
<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”>
内容1…
</div>
</div>
</div>
<div class=”accordion-item”>
…类似结构…
</div>
</div>
手风琴效果演示：
这是第一个手风琴项目的内容。当您打开另一个项目时，我会自动关闭。
这是第二个项目的内容。请注意当我展开时，第一个项目会自动折叠。
这是第三个项目的内容。手风琴效果让界面更整洁，信息更有组织！
1 初始状态显示
默认情况下折叠内容是隐藏的，添加.show类让内容初始可见：
<div class=”collapse show”>…</div>
2 多个按钮控制同一区域
可以使用多个按钮控制同一个折叠区域：
<button data-bs-toggle=”collapse” data-bs-target=”#myCollapse”>按钮1</button>
<button data-bs-toggle=”collapse” data-bs-target=”#myCollapse”>按钮2</button>
<div class=”collapse” id=”myCollapse”>内容区域</div>
<button data-bs-toggle=”collapse” data-bs-target=”#myCollapse”>按钮2</button>
<div class=”collapse” id=”myCollapse”>内容区域</div>
3 水平折叠效果
添加.collapse-horizontal类实现横向折叠：
<div class=”collapse collapse-horizontal”>…</div>
4 JavaScript控制
可以使用JavaScript控制折叠行为：
// 通过ID获取折叠实例
const myCollapse = new bootstrap.Collapse(‘#myCollapse’, {
toggle: false // 初始化选项
})
// 显示折叠内容
myCollapse.show()
// 隐藏折叠内容
myCollapse.hide()
// 切换状态
myCollapse.toggle()
const myCollapse = new bootstrap.Collapse(‘#myCollapse’, {
toggle: false // 初始化选项
})
// 显示折叠内容
myCollapse.show()
// 隐藏折叠内容
myCollapse.hide()
// 切换状态
myCollapse.toggle()
5 事件监听
可以监听折叠相关的事件：
const collapseElement = document.getElementById(‘myCollapse’)
collapseElement.addEventListener(‘show.bs.collapse’, event => {
console.log(‘折叠开始显示’)
})
collapseElement.addEventListener(‘shown.bs.collapse’, event => {
console.log(‘折叠显示完成’)
})
collapseElement.addEventListener(‘hide.bs.collapse’, event => {
console.log(‘折叠开始隐藏’)
})
collapseElement.addEventListener(‘hidden.bs.collapse’, event => {
console.log(‘折叠隐藏完成’)
})
collapseElement.addEventListener(‘show.bs.collapse’, event => {
console.log(‘折叠开始显示’)
})
collapseElement.addEventListener(‘shown.bs.collapse’, event => {
console.log(‘折叠显示完成’)
})
collapseElement.addEventListener(‘hide.bs.collapse’, event => {
console.log(‘折叠开始隐藏’)
})
collapseElement.addEventListener(‘hidden.bs.collapse’, event => {
console.log(‘折叠隐藏完成’)
})
水平折叠效果演示：
我是水平折叠的内容！注意我是从左向右展开的，而不是从上到下。
核心要点
Bootstrap折叠的关键知识点
-
data-bs-toggle: 必须设置为”collapse”
-
data-bs-target: 指向要折叠的元素ID
-
data-bs-parent: 创建手风琴效果的关键
-
.show类: 控制初始状态是否显示
-
事件监听: 精准控制折叠过程
常见问题解决：
折叠不工作？
- 检查ID是否匹配（data-bs-target和折叠内容ID）
- 确保已加载Bootstrap JS文件
- 检查控制台是否有JavaScript错误
实用技巧
提升折叠组件的体验
图标指示器：在按钮上添加图标表示状态
<button data-bs-toggle=”collapse” data-bs-target=”#demo”>
更多选项
<i class=”bi bi-chevron-down”></i>
</button>
更多选项
<i class=”bi bi-chevron-down”></i>
</button>
平滑滚动：当展开长内容时自动滚动到视图
const collapseElement = document.getElementById(‘myCollapse’)
collapseElement.addEventListener(‘shown.bs.collapse’, function() {
this.scrollIntoView({ behavior: ‘smooth’ })
})
collapseElement.addEventListener(‘shown.bs.collapse’, function() {
this.scrollIntoView({ behavior: ‘smooth’ })
})
记住状态：使用localStorage记录用户展开状态
// 当折叠状态变化时保存
collapseElement.addEventListener(‘shown.bs.collapse’, () => {
localStorage.setItem(‘collapseState’, ‘open’)
})
collapseElement.addEventListener(‘hidden.bs.collapse’, () => {
localStorage.setItem(‘collapseState’, ‘closed’)
})
// 页面加载时恢复状态
window.addEventListener(‘DOMContentLoaded’, () => {
if(localStorage.getItem(‘collapseState’) === ‘open’) {
myCollapse.show()
}
})
collapseElement.addEventListener(‘shown.bs.collapse’, () => {
localStorage.setItem(‘collapseState’, ‘open’)
})
collapseElement.addEventListener(‘hidden.bs.collapse’, () => {
localStorage.setItem(‘collapseState’, ‘closed’)
})
// 页面加载时恢复状态
window.addEventListener(‘DOMContentLoaded’, () => {
if(localStorage.getItem(‘collapseState’) === ‘open’) {
myCollapse.show()
}
})