标签默认折叠，点击切换展开状态，必须包含且仅有一个作为首子元素；添加open属性可默认展开；自定义样式需用list-style:none隐藏原生箭头并用::before伪元素替换；监听toggle事件捕获用户交互，首次加载带open时不触发。
details标签的基本用法和默认行为
<details></details> 是原生 HTML5 标签，自带展开/收起逻辑，不需要 JS 就能工作。它默认折叠，点击 <summary></summary> 触发切换，浏览器自动管理 open 属性状态。
常见错误是直接写 <details><p>内容</p></details> 却忘了加 <summary></summary> —— 没有 <summary></summary>，用户根本没地方点，整个区域不可交互。
- 必须包含且仅有一个
<summary></summary>作为第一个子元素 -
<summary></summary>内容会显示为标题栏，支持文本、图标甚至内联元素（如<span></span>） - 默认有小三角箭头，不同浏览器样式略有差异，但行为一致
让某个 FAQ 默认展开
只需给 <details></details> 加 open 属性：<details open></details>。这是布尔属性，存在即生效，无需赋值。
注意：不要写成 open="true" 或 open="open" —— 这样反而可能被某些解析器忽略。纯 open 就够了。
- 适合把最常问的问题（如“如何重置密码？”）默认展开
- 服务端渲染时可动态插入
open，比如根据 URL hash 或用户行为判断 - JS 动态设置用
element.open = true，不是setAttribute('open', '')（虽然后者也行，但前者更直接）
自定义 summary 样式和图标
浏览器默认的三角箭头无法通过 ::marker 在所有浏览器统一控制（Safari 目前不支持），所以稳妥做法是隐藏原生箭头，用伪元素或 SVG 替代。
关键 CSS：
details > summary {
list-style: none;
}
details > summary::before {
content: "▸";
margin-right: 8px;
transition: transform 0.2s;
}
details[open] > summary::before {
content: "▼";
}
-
list-style: none是必须的，否则 Chrome/Firefox 仍显示原生箭头 - 用
::before插入符号比用<span></span>更轻量，也避免干扰语义 - 动画只作用于
transform（如 rotate），不要对content做过渡 —— 它不支持
配合 JavaScript 做联动或统计
<details></details> 触发 toggle 事件，不是 click。监听这个事件才能准确捕获展开/收起动作。
典型场景：记录用户打开了哪条 FAQ，或滚动到对应区域。
- 监听写法：
el.addEventListener('toggle', handler)，不是'click' - 注意：首次加载时如果带
open属性，toggle不会触发 —— 它只响应用户交互 - 若需初始化时也执行逻辑，得单独检查
el.hasAttribute('open') - 多个
<details></details>共存时，别用document.querySelector('details')取第一个，应绑定到具体实例
细节容易被忽略：移动端点击 <summary></summary> 区域边缘可能触发两次事件（尤其在 Safari 中），建议加 event.preventDefault() 仅在必要交互逻辑里用，否则破坏原生可访问性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
