HTML怎么设置页面局部模块折叠展开-html教程-PHP中文网

应直接用和，因其语义正确、键盘可访问、屏幕阅读器友好、代码简洁；手动用 JS 控制 display 或 max-height 会破坏可访问性、导致动画卡顿或内容裁剪，且需额外补全焦点与 ARIA 逻辑。

html怎么设置页面局部模块折叠展开

直接用

和，别写 JS 控制 display 或 max-height —— 语义对、键盘可访问、屏幕阅读器能读、代码少、兼容性够用（IE 除外）。

为什么不用 JavaScript 控制 display 或 height

手动切 display: none / block 会丢掉键盘焦点能力（Tab 跳不过去）、破坏屏幕阅读器播报逻辑；而用 max-height + transition 看似有动画，实则容易卡顿或裁剪内容——因为浏览器无法过渡 height: auto，你只能硬写一个上限值（比如 max-height: 500px），内容超了就溢出，不够就留白。

display 切换不可动画，且让元素彻底退出无障碍树
max-height 动画依赖预估高度，响应式下极易失效
原生自带 toggle 事件、空格/回车触发、焦点管理，JS 方案得自己补全这些

details 和 summary 的硬性约束

必须是的**第一个直接子元素**，中间不能有空格、换行、或其他标签，否则点击无反应。Safari 旧版（≤15.4）对 JS 设置 open 属性支持差，但 HTML 里写是稳的。

错误写法：标题内容财经HTML高端海报生成复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP 下载 —— 不是直接子元素，失效
正确写法：标题内容
内部禁用或，它们会拦截原生 toggle 行为

需要自定义样式但不破坏功能

可以改颜色、字体、加图标，但不能动语义结构。默认箭头由 ::marker 渲染，删了它就得自己补；设 display: block 会让

失去按钮语义，键盘无法聚焦。

安全做法：用 summary::marker { content: none; } 隐藏原生箭头，再用 summary::after 加自定义符号
加动画只推荐 opacity 和 transform: scaleY()，它们可合成、不触发布局重排
若需 JS 控制（如 URL 参数自动展开），只操作 details.open 或调用 details.toggle()，别增删 class 或操作 DOM

兼容 IE 或必须滑动动画怎么办

IE 完全不支持

，此时降级方案不是“手写 JS 模拟”，而是用 CSS :target + 锚点，或轻量 JS 监听点击后切 max-height。但注意：Safari 15.4+、Chrome 120+、Firefox 115+、Edge 116+ 全支持，2026 年绝大多数真实用户已无需兼容 IE。

真要 JS 动画，优先测高后设 max-height：先 getBoundingClientRect().height，再设 style.maxHeight = height + 'px'，最后加过渡
用 checkbox hack 可免 JS 实现状态记忆（刷新后保持展开），但结构受限，适合静态菜单类场景
复杂嵌套或需要联动多个面板时，仍是最小可靠基线，其余逻辑在它之上叠加

最常被忽略的是：把

当成普通容器去塞按钮、图标、开关，结果交互断裂；或者以为加个 transition 就能平滑展开，却没意识到 max-height 的陷阱比想象中深得多。