和是轻量、原生、无障碍友好的可折叠方案，支持键盘操作、焦点管理与ARIA角色，open属性为存在即真型布尔属性，需用伪元素定制样式且动态插入后需手动设置open状态。
为什么不用 display: none 手动控制显隐？
手动切换 display 或 visibility 确实能隐藏内容，但会丢失以下关键能力：
- 无法被屏幕阅读器识别为“可展开区域”，影响可访问性
- 没有默认焦点管理（比如按
Enter或Space键触发展开） - 缺少原生状态同步（
open属性自动反映当前是否展开） - 需额外写 JS 绑定事件、维护状态、处理过渡动画
而 role="group" + aria-expanded），浏览器已内置逻辑。
open 属性不是布尔值，别直接写 open="false"
open 是一个**存在即为真**的布尔属性。它的行为只取决于是否出现在标签中，跟值无关：
<details open><summary>默认展开</summary><p>内容</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="overflowclass">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p class="overflowclass">使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></details><details><summary>默认收起</summary><p>内容</p></details><details open="false"><summary>这依然会默认展开</summary></details>
想初始收起，就不要写 open；想初始展开，只写 open（不带等号或值）。JS 控制时也应使用 element.open = true/false，而非设置属性字符串。
样式定制必须用
details summary {
list-style: none; /* 移除默认三角 */
}
details summary::marker {
content: "▶ "; /* 替换为自定义符号 */
}
details[open] summary::marker {
content: "▼ ";
}
注意：::marker 在部分旧版 Safari 中支持不佳，如需兼容，可改用 background-image 或绝对定位图标。另外，display: flex 后再用 align-items 垂直居中——它内部有匿名 box，容易错位，稳妥做法是用 line-height 或 padding 调整。
真正麻烦的不是写法，而是很多人在 JS 动态插入 element.setAttribute('open', '') 或赋值 .open = true —— DOM 插入后不会自动触发浏览器对布尔属性的解析，这点容易漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
