<details> 标签原生支持简历模块折叠，无需 JS；每个 <details> 独立开关、语义清晰、无障碍友好；需正确书写 <summary> 且避免样式干扰点击。
details 标签本身就能实现简历模块折叠，无需 JS
<details> 是原生 HTML5 元素，浏览器默认支持展开/收起状态切换，<summary> 作为触发标题。它不依赖 JavaScript，语义清晰，对屏幕阅读器友好，适合简历中「教育背景」「项目经历」「技能清单」这类可选展开的模块。
注意：不要把 <summary> 写成闭合标签（如 <summary />），它必须包含内容且有结束标签；<details> 默认是收起状态，加 open 属性可默认展开。
如何让多个 details 模块保持独立开关互不影响
每个 <details> 是完全独立的状态容器，浏览器自动管理其开闭，不需要 ID、class 或事件监听。只要结构正确，它们天然互不干扰：
<details> <summary>工作经历</summary> <p>2021–2023｜前端开发｜XX科技</p> </details> <details> <summary>开源项目</summary> <p>github.com/xxx/vue-utils（维护中）</p> </details>
常见错误：误用 name 或 id 试图“分组”——<details> 不支持这些属性控制联动，加了也没用。
立即学习“前端免费学习笔记（深入）”；
折叠样式不统一？用 CSS 覆盖 summary 的默认箭头和间距
各浏览器对 <summary> 的默认样式不同（比如 Chrome 有右向三角，Safari 在左侧，Firefox 无图标），简历里建议主动重置并统一视觉：
- 用
list-style: none去掉原生箭头 - 用
::marker伪元素自定义符号（如▼或+），但注意 Safari 15.4+ 才支持::marker - 更稳妥的做法：在
<summary>内直接写符号，配合user-select: none防止误选
示例（兼容性好）：
<details>
<summary>? 技能清单</summary>
<ul>
<li>React, Vue3</li>
<li>TypeScript, Webpack</li>
</ul>
</details>
对应 CSS：
summary {
user-select: none;
cursor: pointer;
}
summary::marker { content: "▸ "; }
移动端点按失效或体验差？检查是否被其他样式拦截
在简历页面中，如果 <summary> 点击没反应，大概率是以下原因：
- 父容器设置了
pointer-events: none（比如某些 CSS 重置库或全局样式） -
<summary>内嵌了<a>或<button>，导致事件冒泡异常 - 用了
touch-action: none或-webkit-overflow-scrolling: touch干扰了原生手势
调试方法：在 DevTools 中选中 <summary>，看 Computed 面板里 pointer-events 是否为 auto；临时禁用附近 CSS 规则，确认是否样式冲突。
细节容易被忽略：Chrome for Android 上，如果 <summary> 行高太小（如 line-height: 1），点击热区会变窄，建议最小设为 1.3。
