Bootstrap4 折叠（Collapse）学习笔记
一、基本概念
折叠组件（Collapse）用于内容的显示/隐藏切换，常用于手风琴、FAQ 面板等场景。核心机制是通过data-*属性或 JavaScript 控制元素的展开与收起。
二、基本用法
1. 通过 data 属性（无需 JS）
<!-- 触发器 --><buttonclass="btn btn-primary"type="button"data-toggle="collapse"data-target="#collapseExample"aria-expanded="false"aria-controls="collapseExample">点击展开/收起</button><!-- 折叠内容 --><divclass="collapse"id="collapseExample"><divclass="card card-body">这是一段可折叠的内容。</div></div>2. 通过链接触发
<aclass="btn btn-primary"data-toggle="collapse"href="#collapseExample"role="button"aria-expanded="false"aria-controls="collapseExample">链接触发</a>区别：
<button>用data-target，<a>用href。
3. 通过 JavaScript 触发
$('#collapseExample').collapse({toggle:true});三、关键属性说明
| 属性 | 说明 |
|---|---|
data-toggle="collapse" | 声明触发折叠行为 |
data-target="#id" | 指定目标元素（按钮用） |
href="#id" | 指定目标元素（链接用） |
aria-expanded | 标识展开状态（true/false） |
aria-controls | 指向被控内容的 id，增强无障碍 |
.collapse | 隐藏内容 |
.collapse.show | 显示内容 |
.collapsing | 过渡动画中的临时类 |
四、手风琴（Accordion）
手风琴是折叠的经典应用：同一组内同时只能展开一个面板。
<divclass="accordion"id="accordionExample"><!-- 面板一 --><divclass="card"><divclass="card-header"id="headingOne"><h2class="mb-0"><buttonclass="btn btn-link"type="button"data-toggle="collapse"data-target="#collapseOne"aria-expanded="true"aria-controls="collapseOne">面板一标题</button></h2></div><divid="collapseOne"class="collapse show"aria-labelledby="headingOne"data-parent="#accordionExample"><divclass="card-body">面板一的内容，默认展开。</div></div></div><!-- 面板二 --><divclass="card"><divclass="card-header"id="headingTwo"><h2class="mb-0"><buttonclass="btn btn-link collapsed"type="button"data-toggle="collapse"data-target="#collapseTwo"aria-expanded="false"aria-controls="collapseTwo">面板二标题</button></h2></div><divid="collapseTwo"class="collapse"aria-labelledby="headingTwo"data-parent="#accordionExample"><divclass="card-body">面板二的内容。</div></div></div><!-- 面板三 --><divclass="card"><divclass="card-header"id="headingThree"><h2class="mb-0"><buttonclass="btn btn-link collapsed"type="button"data-toggle="collapse"data-target="#collapseThree"aria-expanded="false"aria-controls="collapseThree">面板三标题</button></h2></div><divid="collapseThree"class="collapse"aria-labelledby="headingThree"data-parent="#accordionExample"><divclass="card-body">面板三的内容。</div></div></div></div>手风琴核心要点
data-parent="#accordionExample"：指定父容器 id，确保同组内互斥展开- 去掉
data-parent则各面板可独立展开（非互斥） - 默认展开的面板加
.show，对应按钮不加.collapsed
五、多目标切换
一个触发器可以同时控制多个折叠区域：
<buttonclass="btn btn-primary"type="button"data-toggle="collapse"data-target=".multi-collapse">同时切换多个区域</button><divclass="collapse multi-collapse"id="first"><divclass="card card-body">第一个区域</div></div><divclass="collapse multi-collapse"id="second"><divclass="card card-body">第二个区域</div></div>原理：
data-target使用类选择器.multi-collapse，匹配所有同类元素。
六、JavaScript 方法
| 方法 | 说明 |
|---|---|
.collapse(options) | 初始化，传入配置对象 |
.collapse('toggle') | 切换显示/隐藏 |
.collapse('show') | 显示 |
.collapse('hide') | 隐藏 |
.collapse('dispose') | 销毁实例 |
// 初始化并配置$('#myCollapse').collapse({toggle:false// 初始化时不自动切换});// 手动控制$('#myCollapse').collapse('show');$('#myCollapse').collapse('hide');$('#myCollapse').collapse('toggle');七、配置选项
| 选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
parent | selector | DOM | jQuery | false | 父容器，实现互斥展开 |
toggle | boolean | true | 初始化时是否切换 |
可通过 data 属性设置：
<divclass="collapse"data-parent="#myAccordion">八、事件
| 事件 | 说明 |
|---|---|
show.bs.collapse | 调用 show 后立即触发 |
shown.bs.collapse | 完全显示后触发（动画完毕） |
hide.bs.collapse | 调用 hide 后立即触发 |
hidden.bs.collapse | 完全隐藏后触发（动画完毕） |
$('#myCollapse').on('shown.bs.collapse',function(){console.log('内容已展开');});$('#myCollapse').on('hidden.bs.collapse',function(){console.log('内容已收起');});九、CSS 过渡状态
折叠动画依赖三个 CSS 类的切换：
收起 → 展开： .collapse → .collapsing → .collapse.show 展开 → 收起： .collapse.show → .collapsing → .collapse| 类名 | 状态 |
|---|---|
.collapse | 隐藏（height: 0） |
.collapsing | 过渡中（动态设置height） |
.collapse.show | 显示（height: auto） |
如需禁用动画：
.collapsing{transition:none!important;}十、完整示例
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Bootstrap4 折叠示例</title><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"><style>.card-header button{width:100%;text-align:left;}</style></head><body><divclass="container mt-4"><h4>基础折叠</h4><p><buttonclass="btn btn-primary"type="button"data-toggle="collapse"data-target="#basicCollapse">展开/收起</button></p><divclass="collapse"id="basicCollapse"><divclass="card card-body">这是一段可以折叠的内容，点击按钮即可切换显示状态。</div></div><hr><h4class="mt-4">手风琴</h4><divclass="accordion"id="myAccordion"><divclass="card"><divclass="card-header"id="h1"><buttonclass="btn btn-link"data-toggle="collapse"data-target="#c1"aria-expanded="true">第一章：概述</button></div><divid="c1"class="collapse show"aria-labelledby="h1"data-parent="#myAccordion"><divclass="card-body">第一章的内容，默认展开。</div></div></div><divclass="card"><divclass="card-header"id="h2"><buttonclass="btn btn-link collapsed"data-toggle="collapse"data-target="#c2">第二章：进阶</button></div><divid="c2"class="collapse"aria-labelledby="h2"data-parent="#myAccordion"><divclass="card-body">第二章的内容。</div></div></div><divclass="card"><divclass="card-header"id="h3"><buttonclass="btn btn-link collapsed"data-toggle="collapse"data-target="#c3">第三章：实战</button></div><divid="c3"class="collapse"aria-labelledby="h3"data-parent="#myAccordion"><divclass="card-body">第三章的内容。</div></div></div></div></div><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script></body></html>十一、注意事项
data-targetvshref：<button>必须用data-target，<a>可用href，两者不要混用data-parent实现互斥：手风琴效果的关键，值必须指向外层容器的选择器- 初始展开：给目标元素加
.show，触发按钮不加.collapsed - 动画依赖
height：折叠动画通过动态设置height实现，如果内容有padding/margin异常可能导致动画不流畅 - 嵌套折叠：支持嵌套，但内层
data-parent应指向内层容器，避免外层误关闭 - 无障碍：始终添加
aria-expanded和aria-controls，方便屏幕阅读器识别
