标签中必须是其第一个直接子元素，否则无法触发展开收起；应使用toggle事件监听状态变化，而非click；默认展开用open属性，样式定制需注意浏览器兼容性。

details 标签必须包裹 summary 才能展开收起

单独写 <summary></summary> 不会生效，它只是 <details></details> 的第一个子元素，且浏览器只识别其作为触发器。如果 <summary></summary> 前面有其他内容（比如空格、换行或文本节点），<details></details> 会忽略它，导致点击无反应或控制逻辑错乱。

• ✅ 正确结构：

  <details>
    <summary>点击展开</summary>
    <p>这里是隐藏内容</p>
  </details>

• ❌ 错误写法：

  <details>
    <p>一段说明</p>
    <summary>点击展开</summary>
    <p>隐藏内容</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
                                                          <div class="artcardd flexRow">
                                                                  <a class="aritcle_card_img" href="/xiazai/skill11499" title="cn-json-diff"><img
                                                                                  src="https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg" alt="cn-json-diff" ></a>
                                                                  <div class="aritcle_card_info flexColumn">
                                                                          <a href="/xiazai/skill11499" title="cn-json-diff">cn-json-diff</a>
                                                                          <p>比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。</p>
                                                                  </div>
                                                                  <a href="/xiazai/skill11499" title="cn-json-diff" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                          </div>
                                                  </div>
  </details>

  （此时 <summary></summary> 不被识别为控制节点）
• ⚠️ 注意：Chrome/Firefox/Safari 都要求 <summary></summary> 是 <details></details> 的**直接子元素**且**排第一**；哪怕加个 <!-- 注释 --> 在它前面也会失效

summary 默认带箭头，但不能用 CSS 伪元素覆盖所有场景

浏览器对 <summary></summary> 内置了 ::marker（显示折叠/展开箭头），但它的渲染行为不统一：Firefox 支持 list-style: none 和 ::marker 控制，Chrome 目前仅部分支持 ::marker，Safari 则基本忽略样式修改。强行用 text-indent 或 padding-left 掩盖箭头容易导致点击热区偏移。

• 稳妥做法是用 display: flex + justify-content: space-between 把文字和自定义图标分开布局
• 若需完全隐藏原生箭头，推荐：

  summary {
    list-style: none;
  }
  summary::marker {
    content: "";
  }

  （注意 Safari 16.4+ 才支持 ::marker，旧版需 JS 检测降级）
• 图标建议用 SVG 内联或 background-image，避免字体图标在缩放时模糊或错位

details 元素默认 open 状态与 JS 控制的兼容性问题

open 属性是布尔属性，写上即生效（如 <details open></details>），但它和 JS 的 details.open = true/false 并非完全同步——比如通过 JS 设置后，再手动点击 summary，某些版本 Safari 会重置状态异常；另外，服务端渲染时若初始设 open，但 JS 后续又调用 details.toggle()，可能触发两次事件。

• 监听状态变化请用 toggle 事件（不是 click）：

  details.addEventListener('toggle', () => {
    console.log('当前状态：', details.open);
  });

• 避免混用 HTML 属性和 JS 赋值：要么全靠属性控制（适合静态内容），要么全由 JS 管理（适合动态交互）
• 需要“默认展开但可关闭”时，用 <details open></details> 即可；需要“默认关闭但首次加载后自动展开”，请在 DOMContentLoaded 后执行 details.open = true，并确保没重复触发

无障碍访问（a11y）必须保留 summary 的语义和键盘支持

<summary></summary> 天然支持键盘操作（空格/回车触发展开），但若用 div + JS 模拟，就得手动补 role="button"、tabindex="0"、aria-expanded 等，成本高且易出错。原生 <details>/<summary></summary></details> 是 WAI-ARIA 推荐的轻量级折叠组件，屏幕阅读器能正确播报状态变化。

• 不要给 <summary></summary> 加 onclick 或 addEventListener('click') —— 它已有完整交互逻辑
• summary 文本需准确描述内容类型，例如“配置选项（3 项）”比“点我”更利于理解
• 若内部含表单控件（如 <input>），确保 details 展开后再聚焦，否则 Chrome 可能跳过未渲染的控件

细节在于 <summary></summary> 必须是 <details></details> 的第一个子节点，以及 toggle 事件才是状态变更的唯一可信信源。其他所有样式或 JS 干预，都该以不破坏这个前提为底线。