是HTML简历折叠内容的首选方案，因其语义准确、无需JS、天然支持无障碍；需规避Safari的::marker兼容问题与高度动画限制，用max-height+JS测高实现平滑动画。
用 <details></details> + <summary></summary> 是 HTML 简历里收纳海量经历最轻量、语义最准、无障碍支持最好的方案，不用 JS 就能工作，但必须绕开 Safari 的 ::marker 兼容坑和高度动画限制。
为什么简历首选 <details></details> 而不是手写 JS 折叠
简历是静态内容展示场景，核心诉求是：结构清晰、加载快、键盘可访问、屏幕阅读器能正确播报“已展开/已收起”。<details></details> 天然满足这四点——浏览器自动加 aria-expanded、aria-controls，空格/回车键触发，open 属性控制初始状态。手写 div + display: none 容易漏掉焦点管理、键盘事件绑定和 ARIA 属性，反而降低可访问性。
- 简历中“项目经历”“实习经历”“技能细分”这类块状内容，天然适合
<details></details>的语义：每个都是独立可折叠的“细节区块” - 不依赖 JS 意味着即使用户禁用脚本，所有内容仍可被爬虫抓取、被打印、被离线保存
- 嵌套使用要谨慎：比如“项目 → 技术栈 → 每个库的说明”，Safari 15.4 之前会丢失内层
<summary></summary>响应，建议只在外层（如单个项目）用<details></details>，内层用纯 CSS 分段标题
<summary></summary> 样式定制的关键限制与解法
简历需要视觉统一，但原生 <summary></summary> 的样式控制很受限：::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); } - 避免在
<summary></summary>里放<button></button>或<a></a>，否则点击事件冒泡冲突，导致折叠失效
想加平滑展开动画？别碰 height，用 max-height + JS 测高
<details></details> 原生不支持 transition，硬给 details 设 height 过渡会失败，因为内容高度是动态的。真要动画，必须脱离原生逻辑，改用 max-height 控制，并手动测量内容高度。
立即学习“前端免费学习笔记（深入）”；
- 不能写死
max-height: 300px：简历内容长度差异大，过短会截断，过长则动画拖沓 - 正确做法：监听
toggle事件，在details.open === true时，用element.scrollHeight获取真实高度，设为max-height；收起时设为0 - 收起后记得清空
max-height并设overflow: hidden，否则残留滚动条影响简历排版 - 如果简历用模板引擎（如 Handlebars）动态渲染，
toggle事件监听必须在节点插入 DOM 后再绑定，不能只靠页面加载时的querySelectorAll
简历里折叠内容含视频、iframe 或表单时的陷阱
收起 <details></details> 不等于卸载内容——<iframe></iframe> 里的视频仍在后台播放，<input> 的值也不会清空。这对简历虽不常见，但若你放了作品 Demo 链接或在线交互示例，就得主动处理。
- 在
toggle事件回调里判断：if (!details.open) { iframe.contentWindow?.pause?.(); } - 对表单类内容，可在收起时备份
input.value到data-属性，展开时恢复，避免用户反复切换丢失输入 - 更简单策略：简历中尽量避免可交互元素，把 Demo 改成截图 + 链接文字，既轻量又规避所有运行时问题
真正难的不是实现折叠，而是决定哪些内容值得折叠——简历空间有限，优先折叠的是“补充说明”“技术细节”“次要项目”，而不是核心成果。别为了折叠而折叠，让折叠服务于信息层级，而不是掩盖信息缺失。
