details标签核心作用是语义化声明可折叠披露组件，必须以summary为首个子元素，否则safari等浏览器点击失效；自定义图标应使用summary::before，js控制须操作open属性而非display。
details 标签不是“用来加动画的”，它的核心作用是语义化地声明一个可折叠的披露组件——浏览器原生支持展开/收起、键盘操作（Enter/Space）、屏幕阅读器识别状态，连 toggle 事件都自动触发。所有“高级玩法”都得先踩稳这个基础。
summary 必须是 details 的第一个子元素，否则点不动
这是最常被忽略的结构铁律。Safari 和部分旧版 Chrome 会直接禁用点击逻辑，表现为“鼠标悬停有手型，但点了没反应”。
- ✅ 正确：
<details><summary>标题</summary><p>内容</p></details> - ❌ 错误：
<details><div><summary>标题</summary></div> <p>内容</p></details>（summary被div包裹） - ❌ 错误：
<details><p><summary>标题</summary></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>内容</p></details>（summary不是首个子节点） - ⚠️ 注意：
summary内部避免用display: inline-block或float，会压缩点击热区，尤其在移动端易失焦
自定义箭头必须用 summary::before，别碰 ::marker
::marker 在 Safari ≤15.6 和部分 Edge 中不生效，::-webkit-details-marker 又只限 WebKit。统一用 summary::before 是唯一可靠方案。
- 隐藏原生图标：
summary { list-style: none; } - 加自定义图标：
summary::before { content: "▶"; margin-right: 6px; transition: transform 0.2s; } - 展开时旋转：
details[open] summary::before { transform: rotate(90deg); } - 不要写
details[open] summary::marker { display: none; }——这行在 Safari 上根本无效
JS 控制必须改 open 属性，不能动 style.display
直接设置 el.style.display = 'none' 会绕过浏览器内置状态机：键盘焦点错乱、toggle 事件不触发、屏幕阅读器读不出当前是否展开。
- ✅ 正确切换：
el.open = !el.open或el.toggleAttribute('open') - ✅ 监听变化：
el.addEventListener('toggle', () => console.log('当前状态：', el.open)) - ✅ 默认展开：
<details open><summary>标题</summary><p>内容</p></details> - ⚠️ 注意：想实现“手风琴效果”（单开一栏），得用 JS 遍历其他
details并设.open = false，不能靠 CSS 伪类模拟
真正难的不是让内容动起来，而是让 details 在 Safari、VoiceOver、低配安卓机上都保持一致的行为。所有“高级”样式或交互，一旦破坏了原生语义链（比如用 div 包 summary、用 display 覆盖状态），就等于把布洛芬换成了安慰剂——看起来像在治病，其实没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
