HTML中交互式折叠元素怎么使用-html教程-PHP中文网

details标签必须严格遵循结构规范：summary须为第一个直接子元素，否则浏览器静默降级；css自定义箭头需用::marker并清除list-style；js应仅操作open属性并监听toggle事件，避免display/height干预。

html中交互式折叠元素怎么使用

浏览器对 details 的解析非常严格：summary 必须是 details 的第一个直接子元素，中间不能插入任何其他标签（包括 div、span 或注释）。一旦结构不合法，浏览器会静默降级——箭头消失、点击无响应、open 属性失效，但控制台不会报错。

常见错误写法：<details><div><summary>标题</summary></div> <p>内容</p></details>

正确写法只有这一种：<details><summary>标题</summary><p>内容</p></details>

summary 内部可放文字、img、svg，但不要设 display: flex 或 display: grid，否则原生箭头可能错位或消失
如需包裹样式，只能套在 details 外层，或仅作用于 summary 内部元素
不要给 summary 套 button —— 它本身已是语义化可交互元素，嵌套会破坏键盘操作与屏幕阅读器支持

所有现代浏览器默认在 summary 前渲染小三角，但它不是普通伪元素，无法用 background 或 content 直接覆盖。必须先清除原生标记，再用 ::marker 重绘。

关键 CSS：

summary {
  list-style: none;
}
summary::marker {
  content: "▶";
  vertical-align: middle;
}
details[open] summary::marker {
  content: "▼";
}

::marker 在 Chrome/Firefox 中垂直对齐不一致，加 vertical-align: middle 可统一基线；旧版 Safari 不支持 ::marker，需回退到 summary::before + transform: rotate()。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

需要程序化控制时（比如页面加载后根据 URL 参数展开某一项），直接读写 open 属性即可。这是标准 DOM API，兼容性好、语义清晰、且能触发 toggle 事件。

展开：el.open = true；收起：el.open = false；判断状态：if (el.open) { ... }

绝对不要用 el.style.display = 'none' 或 el.style.height = '0' —— 这会绕过原生行为，导致键盘操作失效、toggle 事件不触发
监听状态变化必须用 toggle 事件，不是 click：el.addEventListener('toggle', () => { ... })
在 toggle 回调里再赋值 el.open = true/false 会导致无限循环，禁止这么做