原生 <details> 比手写 JS 更可靠，因其天然支持键盘操作、aria-expanded 自动同步、焦点管理，且语义正确、可打印、兼容 ATS 和屏幕阅读器。
直接用 <details> + <summary> 就能做出语义正确、键盘可访问、无需 JS 的可折叠简历区块，但必须注意 <summary> 是 <details> 的第一个子元素，否则点击无效。
为什么简历里用 <details> 比手写 JS 更可靠
简历不是交互应用，核心诉求是“信息可读、可打印、可被 ATS 和屏幕阅读器识别”。原生 <details> 天然支持：空格/回车触发、aria-expanded 状态自动同步、默认焦点管理。而自己用 div + onclick + display: none 容易漏掉键盘操作、不设 aria-controls、收起后焦点丢失——这些在 HR 快速扫视或使用读屏软件时会直接导致信息不可达。
-
<details open>可让「联系方式」或「核心技能」默认展开，其余如「项目细节」「证书列表」默认收起 - 不支持嵌套：不要在
<details>里再套<details>，Safari 和部分旧版 Chrome 会失效 - 不能用
height做过渡动画——内容高度动态，强行transition: height会抖动或卡死
怎么让 <summary> 标题看起来更像简历模块标题
浏览器默认给 <summary> 加了个小三角，但样式控制有限。Safari 对 summary::marker 支持差，直接设 content: "" 会导致无图标、无反馈。稳妥做法是用 summary::before 手动加图标并旋转：
summary {
list-style: none;
padding-left: 24px;
position: relative;
}
summary::before {
content: "▶";
position: absolute;
left: 0;
transition: transform 0.2s;
}
details[open] > summary::before {
transform: rotate(90deg);
}
- 别依赖
font-awesome或外部图标字体——PDF 导出时可能缺失，纯字符更稳 - 用
details[open]而不是.open类，避免 JS 干预状态，保持原生语义 - 如果要加背景色或边框，直接作用于
summary，但别改cursor：浏览器已内置 pointer，手动设反而干扰可访问性
哪些简历内容适合折叠？优先级怎么排
折叠不是为了炫技，而是压缩次要信息密度，让招聘方 3 秒内看到姓名、联系方式、最近一段工作、核心技能。实操中按信息权重降序决定是否折叠：
立即学习“前端免费学习笔记（深入）”；
- ✅ 默认展开：
<header>（含姓名+求职意向）、<section>中的「联系方式」和「核心技能」 - ✅ 默认收起：
<section>中的「项目详情」（只留标题和一句话摘要）、「证书列表」、「兴趣爱好」 - ❌ 不要折叠：
<h2>模块标题本身（如「教育背景」「工作经历」），它们是导航锚点，折叠后结构断裂 - ⚠️ 注意：PDF 导出时
<details>默认全部展开，若想保持收起状态，必须用 JS 动态移除open属性 +@media print隐藏内容——但代价是牺牲语义，不推荐
真正难的不是让内容“能折叠”，而是判断哪部分该折叠。很多人的简历把「工作经历」整个包进 <details>，结果 HR 第一眼看不到公司名和职位——这违背了折叠的初衷。留出关键字段，收起细节描述，才是精简的本质。
