用details最省事但需注意兼容性，现代浏览器支持原生折叠，IE和旧Edge需JS控制；表单折叠应避免display:none，优先用visibility:hidden+height:0+overflow:hidden保留状态；动画用max-height过渡并设合理值；折叠不等于禁用，须同步disabled和required属性确保校验正确。
折叠区域用 details 最省事，但得注意浏览器兼容性
现代浏览器（Chrome 12+、Firefox 49+、Safari 12.1+）原生支持 details + summary 实现无 JS 折叠，语义正确、键盘可访问、无需额外样式。但 IE 完全不支持，Edge 18 及更早版本也不行。
如果项目需兼容 IE 或旧 Edge，别硬套 details，直接上 JS 控制 display 或 max-height 更可控。
-
details默认展开，加open属性可强制打开；去掉则默认收起 -
summary内容自动变成折叠按钮，点击触发切换，无需绑定事件 - 不能嵌套
details（部分浏览器会出错），多个折叠区请平级放置 - 若用 CSS 自定义箭头，需重置
summary::marker并手动加伪元素，否则 Safari 和 Firefox 表现不一致
用 JavaScript 控制 display 切换时，别直接设 display: none
表单区域常含 input、select 等交互控件，直接设 display: none 会导致焦点丢失、校验状态清空、甚至 Vue/React 组件卸载——用户展开后要重新初始化。
更稳妥的做法是用 visibility: hidden + height: 0 + overflow: hidden 组合隐藏，保留 DOM 结构和状态。
立即学习“前端免费学习笔记（深入）”；
- 切换时优先改
classList，比如form-section--collapsed，CSS 中定义对应样式 - 避免用
element.style.display = 'none'，它会覆盖外部 CSS，后续难以维护 - 若区域含第三方组件（如日期选择器），收起前调用其销毁方法（如
picker.destroy()），展开时再重建
折叠动画用 max-height 过渡，但得设合理值
max-height 是实现平滑收起动画最常用方式，但它依赖“已知最大高度”。设太小会截断内容，设太大则动画拖沓。
实际中建议：对固定结构的表单区域，手算内容最大高度（含 padding/margin）；对动态内容，用 JS 测量真实 scrollHeight 后赋值。
- 过渡写在
max-height上，别写height—— 后者无法从auto动画 - 收起结束时，仍需配合
overflow: hidden防止内容溢出 - 动画时间控制在
0.2s ~ 0.3s，过长显得卡顿，过短用户感知不到变化 - 移动端要注意，
max-height动画在 iOS Safari 上偶尔有渲染延迟，可加transform: translateZ(0)强制 GPU 加速
表单提交前必须检查折叠区域是否被跳过校验
折叠本身不影响 form 提交逻辑，但用户可能误以为收起的区域不用填，或 JS 控制折叠时没同步禁用/启用字段的 required 属性。
关键点在于：折叠 ≠ 逻辑禁用。即使视觉隐藏，只要字段仍在 DOM 中且未设 disabled，就会参与原生校验和序列化。
- 若某区域仅在特定条件下才需填写（如“是否开具发票”为是时才显示发票信息），收起时应同步设
fieldset.disabled = true，并移除required - 提交前用
form.checkValidity()检测，但注意它不检查disabled字段 —— 所以禁用逻辑必须和折叠状态严格同步 - 使用
FormData收集数据时，disabled字段不会被包含，但display: none的字段仍会被收集，这点常被忽略
