summary是details的唯一交互锚点，必须为首个直接子元素，支持点击及键盘操作触发展开/收起；嵌套、前置空白或错误结构将导致功能失效，open属性为布尔型，仅存在即生效。
summary 是 details 的唯一控制入口
summary 不是装饰性标题，它是 details 元素的交互锚点——点击、空格键、回车键触发展开/收起，全靠它。浏览器只认这个元素作为切换开关，且必须是 details 的第一个直接子元素。任何包裹（比如 <p><summary>...</summary></p>）、前置空白、注释或兄弟节点都会让交互失效。
- DOM 结构必须严格为：
<details><summary>文本</summary>...其他内容...</details> - JS 检查是否生效：执行
document.querySelector('details').open，初始应为false；点击后变为true - 若点击无反应，优先用浏览器开发者工具检查
summary是否真为details的首个子节点（右键“查看元素”看 DOM 树）
summary 里能放按钮、链接或 heading 吗
能放，但语义和行为会变。原生 summary 自带可聚焦、键盘可操作（Space/Enter）、屏幕阅读器识别为“可展开控件”的能力。一旦在里面塞 <button></button> 或 <a href></a>，焦点逻辑就混乱了：用户按 Tab 进入 summary，再按一次 Tab 又跳到内部按钮，反而绕过了 toggle 行为。
- heading（如
<h3></h3>）可以嵌套，但需重置样式：display: inline-block+margin: 0，否则默认块级会撑开换行，把原生箭头挤到下一行甚至消失 - 链接建议移出 summary，放到展开后的内容区；若必须放，用
<a href="#" role="link"></a>并阻止默认跳转，避免干扰 toggle - 绝对不要在
summary里放<input>或<select></select>—— 焦点捕获和事件冒泡极易导致展开状态错乱
为什么加了 open 属性还是不展开
因为 open 是布尔属性，只看是否存在，不看值。写成 <details open="false"></details> 或 <details open=""></details> 都等同于 open=true。浏览器只要看到 open 这个词，就强制展开。
- 正确默认展开：
<details open><summary>标题</summary><p>内容</p></details> - JS 控制开关必须用属性赋值：
el.open = false（不是el.setAttribute('open', false)），后者只是设字符串，无效 - 监听状态变化用
toggle事件：el.addEventListener('toggle', () => console.log(el.open))，别用 click
箭头消失、错位或不旋转的常见原因
原生箭头由浏览器通过伪元素渲染（Chrome 用 ::-webkit-details-marker，Firefox 用 ::-moz-list-bullet），它非常脆弱，容易被 CSS 意外干掉。
-
list-style: none写在summary上会删掉箭头；应只写在summary::marker上，或用appearance: none配合自定义图标 - 给
summary设display: flex或display: grid会破坏箭头定位上下文，改用display: inline-flex更安全 - iOS Safari 15.4 之前版本对
summary点击热区极窄，务必加cursor: pointer和padding扩展可点区域
真正难搞的不是让 summary 动起来，而是让它在各种嵌套、样式重置、无障碍需求下依然稳定响应——每次加 CSS 前先问一句：这会不会动到 marker 的渲染上下文？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
