手把手教你HTML中details标签的样式重塑_实现现代感折叠组件-html教程-PHP中文网

details 标签需严格遵循 dom 结构规范，summary 必须是 details 的第一个元素节点，css 自定义箭头应使用 summary::before，js 控制必须操作 open 属性而非 display，且需手动暂停折叠内容中的媒体与脚本。

手把手教你html中details标签的样式重塑_实现现代感折叠组件

details 标签本身不带现代感，靠 CSS 重写才能达到设计稿要求——但直接改 ::marker 或用 display: inline-block 在 summary 上，大概率让点击失效、Safari 默认展开关不掉、箭头错位。

DOM 解析时，summary 必须是 details 的**第一个子节点（element node）**，不能被任何文本节点（包括换行、空格、HTML 注释）或其它标签包裹。

✅ 正确：<details><summary>标题</summary><p>内容</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/2825" title="秒绘AI"><img src="https://img.php.cn/upload/ai_manual/001/246/273/69fab5de1dffc668.png" alt="秒绘AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/2825" title="秒绘AI" class="overflowclass">秒绘AI</a> <p class="overflowclass">一款AI图像与设计工具，主要用于秒绘AI，让电商上新快人一步，适合需要提升相关任务效率的用户。</p> </div> <a rel="nofollow" href="/ai/2825" title="秒绘AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></details>
❌ 错误：<details><summary>标题</summary></details>（注释是文本节点）
❌ 错误：<details><div><summary>标题</summary></div> <p>内容</p></details>（summary 不是直接子元素）
错误后果：Safari 和旧版 Chrome 完全忽略点击逻辑，键盘 Space/Enter 也无效

::marker 在 Safari ≤15.6、部分 Edge 和老 Firefox 中不渲染；::-webkit-details-marker 只对 WebKit 有效。唯一跨浏览器稳定的方案是清掉原生标记，再用 ::before 插入图标。

先清除默认：summary { list-style: none; }
再注入图标：summary::before { content: "▶"; margin-right: 6px; transition: transform .2s; }
展开时旋转：details[open] > summary::before { transform: rotate(90deg); }
⚠️ 别给 summary 设 display: inline-block 或 float，会缩小点击热区，尤其影响触屏操作

直接设 el.style.display = 'none' 看似能隐藏内容，但绕过了浏览器内置状态管理：屏幕阅读器读不出当前状态，toggle 事件不触发，键盘操作失灵。

✅ 正确切换：el.open = !el.open 或 el.toggleAttribute('open')
✅ 监听变化：el.addEventListener('toggle', () => console.log(el.open))
❌ 错误写法：el.style.display = el.open ? 'block' : 'none'
iOS Safari ≤15.4 对 JS 设置 open 属性有延迟，建议加兜底：if ('open' in el && !el.hasAttribute('open')) el.open = false