必须是的第一个子元素，否则点击失效；其文本是屏幕阅读器播报的控件名称，需语义明确；样式需重置list-style和cursor，并用::marker自定义符号；状态监听应使用toggle事件而非click。

summary 标签必须是 details 的第一个子元素

浏览器会强制把 <summary></summary> 当作 <details></details> 的唯一可点击标题，如果它不在最前面，或者中间插了其他标签（比如 <p></p> 或空格文本节点），点击行为就会失效或显示异常。常见错误是写成：

<details><p>一些说明文字</p>
  <summary>点我展开</summary></details>

这会导致 <summary></summary> 不可点击，甚至被忽略。正确结构只能是：

<details><summary>点我展开</summary><p>折叠的内容</p>
</details>

• 即使只加一个换行符或空格文本，某些浏览器（如 Safari）也可能破坏默认样式或焦点逻辑
• 不能用 CSS 的 display: flex 或 order 属性强行“视觉上”调换位置——语义和交互已失效
• 想在标题旁加图标？用 <summary><span>标题</span><span aria-hidden="true">▶</span></summary>，再配合 CSS 控制图标旋转

summary 里的内容会被读屏器当作控件名称朗读

辅助技术（如 VoiceOver、NVDA）会把 <summary></summary> 的文本作为这个折叠控件的“名字”，用户听到的是“点我展开，折叠按钮”，而不是“点我展开，详细信息”。这意味着：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 避免写模糊文案，比如“更多”“点击查看”——应明确说明内容类型，例如“系统日志（12 条）”“API 响应示例”
• 不要依赖纯图标（如 ?）而无文字，除非用 aria-label 补充，但更推荐直接放可读文本
• 动态更新标题时（比如展开后改成“收起”），必须同步更新 <summary></summary> 的文本内容，否则读屏器不会感知变化

自定义 summary 样式时要重置默认的 list-style 和 cursor

浏览器给 <summary></summary> 默认加了小三角（list-style）和手型光标（cursor: pointer），但不同内核渲染方式不同：Chrome/Firefox 用伪元素 ::marker，Safari 则可能走 list-style。不重置容易出现双箭头或对齐错乱。

summary {
  list-style: none; /* 必须写 */
  cursor: default;   /* 避免与 button 混淆，且方便自己加 hover 效果 */
}
summary::marker {
  content: "▸ "; /* 自定义符号，注意空格 */
}
summary[open]::marker {
  content: "▼ ";
}

• list-style: none 是底线，不加的话 Safari 可能保留原生三角 + 你自己的 ::marker，叠在一起
• 别用 appearance: none —— 它对 <summary></summary> 无效，且无跨浏览器意义
• 如果用 SVG 替代 marker，记得设 width/height 和 vertical-align，否则基线对不齐

JavaScript 监听 open/close 状态要用 toggle 事件而非 click

用户可以通过空格键、回车键或辅助工具触发展开/收起，仅监听 click 会漏掉键盘操作。正确做法是监听 toggle 事件：

document.querySelector('details').addEventListener('toggle', function() {
  console.log('当前状态：', this.open); // true 或 false
});

• toggle 是唯一可靠反映状态变更的事件，click 只表示用户点了，不保证状态已变（比如被 preventDefault() 阻止）
• 不要在 toggle 里调用 this.open = !this.open —— 这会引发无限循环
• 需要兼容旧浏览器（IE）？<details></details> 本身就不支持 IE，别白费力气 polyfill；真要支持，改用 <div role="region"> + 手动管理 <code>aria-expanded

  细节容易被绕开的一点：summary 的文本内容不是“装饰”，它是控件语义的核心载体——既影响键盘导航流，也决定屏幕阅读器如何播报，还牵扯到 SEO 对折叠内容的索引权重。改样式可以大胆，动语义请三思。