details 和 summary 是原生可折叠组件，需确保 summary 为 details 的首个子元素且不颠倒嵌套顺序；open 为布尔属性，仅存在即生效；监听 toggle 事件响应状态变化，禁用 preventDefault；自定义样式须兼容 ::marker 并保留原生交互。
details 和 summary 是浏览器原生支持的折叠组件，不用写 JS 就能实现展开/收起，语义清晰、键盘可用、屏幕阅读器友好。
基础结构必须满足两个硬性条件
很多页面一加就失效，往往卡在这两点：
-
summary必须是details的第一个子元素，中间不能插其他标签（哪怕一个空格、 -
details内部除summary外的内容，会自动被隐藏；但不能把details套在summary外面——顺序反了就完全不工作
正确写法示例：
<details><summary>常见问题</summary><p>这里的内容默认收起，点击标题才显示。</p> </details>
控制默认展开用 open 属性，别写成 open="true"
open 是布尔属性，有它就展开，没它就收起。写成 open="true" 或 open="false" 都无效——浏览器只看是否存在该属性名。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 默认展开：
说明
... - JS 动态控制：
el.open = true或el.open = false，会立即触发重绘 - 注意：设置
open后再用 JS 改el.open，仍会触发toggle事件
监听展开收起动作要用 toggle 事件，不是 click
直接给 summary 绑 click 事件容易破坏原生行为（比如阻止默认、重复触发、干扰键盘操作），应该监听 details 元素上的 toggle 事件：
const details = document.querySelector('details');
details.addEventListener('toggle', () => {
console.log('当前状态：', details.open);
});
- 该事件在用户点击
summary、按空格/回车键、或 JS 修改open属性时都会触发 - 首次页面加载时不会触发，仅响应状态变化
- 不要在事件处理中调用
event.preventDefault()—— 它对toggle无效，且无意义
自定义箭头和样式要注意 marker 伪元素兼容性
浏览器默认在 summary 前加一个可旋转的小箭头，用 details[open] > summary::marker 可覆盖，但有坑：
-
::marker在 Safari 15.4+ 和 Chrome 110+ 才稳定支持，旧版需用summary::before+content模拟 - 不能用
display: none隐藏::marker，得用content: "" - 若要换图标，建议用 inline SVG 而非字体图标，避免缩放错位或加载失败
真正容易被忽略的是：所有样式增强都应在保障原生交互的前提下做，一旦加了 pointer-events: none 或覆盖了 summary 的点击区域，折叠功能就可能失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
