是HTML简历折叠内容的首选方案，因其语义准确、无需JS、天然支持无障碍；需规避Safari的::marker兼容问题与高度动画限制，用max-height+JS测高实现平滑动画。

用

+

是 HTML 简历里收纳海量经历最轻量、语义最准、无障碍支持最好的方案，不用 JS 就能工作，但必须绕开 Safari 的 ::marker 兼容坑和高度动画限制。

为什么简历首选

而不是手写 JS 折叠

简历是静态内容展示场景，核心诉求是：结构清晰、加载快、键盘可访问、屏幕阅读器能正确播报“已展开/已收起”。

天然满足这四点——浏览器自动加 aria-expanded、aria-controls，空格/回车键触发，open 属性控制初始状态。手写 div + display: none 容易漏掉焦点管理、键盘事件绑定和 ARIA 属性，反而降低可访问性。

• 简历中“项目经历”“实习经历”“技能细分”这类块状内容，天然适合
  的语义：每个都是独立可折叠的“细节区块”
• 不依赖 JS 意味着即使用户禁用脚本，所有内容仍可被爬虫抓取、被打印、被离线保存
• 嵌套使用要谨慎：比如“项目 → 技术栈 → 每个库的说明”，Safari 15.4 之前会丢失内层
  响应，建议只在外层（如单个项目）用
  ，内层用纯 CSS 分段标题

样式定制的关键限制与解法

简历需要视觉统一，但原生

的样式控制很受限：::marker 在 Safari 中对 content 设置常失效，直接改 font-size 或 padding 又可能被浏览器重置。稳妥做法是弃用 ::marker，改用 ::before。

• 隐藏默认箭头：summary { list-style: none; }（比 summary::marker { content: ""; } 兼容性高）
• 添加自定义图标：summary::before { content: "▶"; display: inline-block; margin-right: 6px; transition: transform 0.2s; }
• 展开时旋转：details[open] summary::before { transform: rotate(90deg); }
• 避免在
  里放 或 ，否则点击事件冒泡冲突，导致折叠失效

想加平滑展开动画？别碰 height，用 max-height + JS 测高

原生不支持 transition，硬给 details 设 height 过渡会失败，因为内容高度是动态的。真要动画，必须脱离原生逻辑，改用 max-height 控制，并手动测量内容高度。

超级简历WonderCV

一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

下载

• 不能写死 max-height: 300px：简历内容长度差异大，过短会截断，过长则动画拖沓
• 正确做法：监听 toggle 事件，在 details.open === true 时，用 element.scrollHeight 获取真实高度，设为 max-height；收起时设为 0
• 收起后记得清空 max-height 并设 overflow: hidden，否则残留滚动条影响简历排版
• 如果简历用模板引擎（如 Handlebars）动态渲染，toggle 事件监听必须在节点插入 DOM 后再绑定，不能只靠页面加载时的 querySelectorAll

简历里折叠内容含视频、iframe 或表单时的陷阱

收起

不等于卸载内容—— 里的视频仍在后台播放， 的值也不会清空。这对简历虽不常见，但若你放了作品 Demo 链接或在线交互示例，就得主动处理。

• 在 toggle 事件回调里判断：if (!details.open) { iframe.contentWindow?.pause?.(); }
• 对表单类内容，可在收起时备份 input.value 到 data- 属性，展开时恢复，避免用户反复切换丢失输入
• 更简单策略：简历中尽量避免可交互元素，把 Demo 改成截图 + 链接文字，既轻量又规避所有运行时问题

真正难的不是实现折叠，而是决定哪些内容值得折叠——简历空间有限，优先折叠的是“补充说明”“技术细节”“次要项目”，而不是核心成果。别为了折叠而折叠，让折叠服务于信息层级，而不是掩盖信息缺失。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！