标签原生支持简历模块折叠，无需 js；每个 独立开关、语义清晰、无障碍友好；需正确书写 且避免样式干扰点击。
details 标签本身就能实现简历模块折叠，无需 JS
<details></details> 是原生 HTML5 元素，浏览器默认支持展开/收起状态切换，<summary></summary> 作为触发标题。它不依赖 JavaScript，语义清晰，对屏幕阅读器友好，适合简历中「教育背景」「项目经历」「技能清单」这类可选展开的模块。
注意：不要把 <summary></summary> 写成闭合标签（如 <summary></summary>），它必须包含内容且有结束标签；<details></details> 默认是收起状态，加 open 属性可默认展开。
如何让多个 details 模块保持独立开关互不影响
每个 <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></details> 不支持这些属性控制联动，加了也没用。
折叠样式不统一？用 CSS 覆盖 summary 的默认箭头和间距
各浏览器对 <summary></summary> 的默认样式不同（比如 Chrome 有右向三角，Safari 在左侧，Firefox 无图标），简历里建议主动重置并统一视觉：
- 用
list-style: none去掉原生箭头 - 用
::marker伪元素自定义符号（如▼或+），但注意 Safari 15.4+ 才支持::marker - 更稳妥的做法：在
<summary></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></summary> 点击没反应，大概率是以下原因：
- 父容器设置了
pointer-events: none（比如某些 CSS 重置库或全局样式） -
<summary></summary>内嵌了<a></a>或<button></button>，导致事件冒泡异常 - 用了
touch-action: none或-webkit-overflow-scrolling: touch干扰了原生手势
调试方法：在 DevTools 中选中 <summary></summary>，看 Computed 面板里 pointer-events 是否为 auto；临时禁用附近 CSS 规则，确认是否样式冲突。
细节容易被忽略：Chrome for Android 上，如果 <summary></summary> 行高太小（如 line-height: 1），点击热区会变窄，建议最小设为 1.3。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
