details元素默认收起，添加open布尔属性可使其初始展开；javascript中应使用el.open = true/false或toggleattribute()控制状态，避免字符串赋值。
details元素默认不展开，open属性控制初始状态
HTML <details></details> 默认是收起的，想让它一加载就展开，得加 open 这个布尔属性。它不是写成 open="true" 或 open="open"，而是直接写 open 就行——有这个属性就展开，没这个属性就不展开。
常见错误是把它当字符串属性用，比如 open="true"，这样浏览器会当成 open="" 处理（依然生效），但语义不对，也容易和 JS 的 element.open = true 混淆。
-
<details open><summary>标题</summary>内容</details>—— 正确写法 -
<details open="open">...</details>—— 不推荐，冗余且易误解 -
<details open="true">...</details>—— 语法合法但不符合规范，建议避免
JS动态控制open状态，别直接赋值字符串
用 JavaScript 切换折叠状态时，操作的是 DOM 元素的 open 属性，它是布尔值，不是字符串。直接写 el.open = "true" 或 el.open = "false" 会出问题：字符串非空即为真，所以 "false" 也会让面板展开。
正确做法是用布尔值或 toggleAttribute()：
-
el.open = true或el.open = false—— 最直白 -
el.toggleAttribute('open')—— 切换有无该属性，更贴近 HTML 行为 -
el.setAttribute('open', '')和el.removeAttribute('open')也行，但不如布尔赋值简洁
注意：设置 el.open = false 后，<details></details> 标签上不会自动移除 open 属性（除非你手动 remove），但 DOM 属性值已为 false，视觉和行为都按收起处理。
summary里放什么内容？别塞块级元素或交互控件
<summary></summary> 是 <details></details> 的唯一可点击区域，负责触发展开/收起。它默认是 inline 元素，如果在里面放 <div>、<code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 或按钮，可能破坏点击区域或导致样式错乱。
- 允许内联内容：
<strong></strong>、<span></span>、文字、图标（用<svg></svg>或伪元素） - 避免块级标签：
<div>、<code><p></p>、<h3></h3>等，否则可能撑开高度、影响点击热区 - 慎用
<button></button>：自带 click 阻止冒泡，会干扰<details></details>自身的展开逻辑 - 把
<summary></summary>包在<div> 里 → 屏幕阅读器无法识别折叠关系 <li>多个 <code><summary></summary>—— 只有第一个生效，其余被忽略 - 没写
<summary></summary>→ 浏览器会自动生成一个“Details”文本，但不可定制，也不利于语义化
如果需要图标指示状态，推荐用 CSS 的 ::before 或 ::after + details[open] summary::after 控制，比在 HTML 里硬塞更可控。
兼容性和无障碍注意事项
<details></details> 在现代浏览器中支持良好（Chrome 12+、Firefox 49+、Safari 6.2+），但 IE 完全不支持。如果需兼容旧环境，得用 JS 手动模拟，不能只靠原生标签。
无障碍方面，原生 <details></details> 已自带 ARIA 属性（如 aria-expanded），但前提是 <summary></summary> 是它的第一个子元素，且没被其他元素包裹。常见坑：
移动端要注意：iOS Safari 对 <details></details> 的 touch 响应有时有轻微延迟，若对点击反馈要求高，可加 cursor: pointer 和 user-select: none 微调体验。
