HTML手风琴效果结构_HTML折叠内容区域布局-html教程-PHP中文网

+是最简可靠的手风琴结构，现代浏览器原生支持、语义正确、键盘可用、屏幕阅读器可识别；必须为首个子元素，否则safari等可能失效；details[open]仅控制显隐，不支持高度过渡动画。

html手风琴效果结构_html折叠内容区域布局

直接用 <details></details> + <summary></summary> 是最简、最可靠的手风琴结构，现代浏览器原生支持，语义正确、键盘可用、屏幕阅读器能识别状态；别再手动写 div + click + display: none —— 那样既漏交互，又破坏可访问性。

为什么 `<summary></summary>` 必须是 `<details></details>` 的第一个子元素

这是规范硬性要求。浏览器只在 <summary></summary> 为首个子节点时，才将其识别为触发器：点击空白区、回车、空格都能触发切换。若中间插了注释、<span></span> 或文本节点，部分 Safari 和旧 Edge 会完全忽略点击响应。

<details><summary>标题</summary><p>内容</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3308" title="Claude风格HTML汇报文件"><img src="https://img.php.cn/upload/skill/000/000/081/178953491350137.jpg" alt="Claude风格HTML汇报文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3308" title="Claude风格HTML汇报文件" class="overflowclass">Claude风格HTML汇报文件</a> <p class="overflowclass">生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid</p> </div> <a rel="nofollow" href="/xiazai/skill3308" title="Claude风格HTML汇报文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></details> ✅ 正确
<details><summary>标题</summary><p>内容</p></details> ❌ Safari 可能不响应
<details><div><summary>标题</summary></div> <p>内容</p></details> ❌ 失效，<summary></summary> 不再是首个子元素

`details[open]` 能做什么，不能做什么

它只是个布尔状态标记，控制显隐逻辑，但不提供动画能力。CSS 中可用 details[open] > * 选中展开后的内容，但无法对高度做平滑过渡 —— 因为 <details></details> 内部高度是动态计算的，height 和 max-height: auto 都不能参与 transition。

✅ 可以：details[open] { border-color: #42b983; }、details[open] summary::before { transform: rotate(90deg); }
❌ 不能：details { transition: height 0.3s; }（无效）或 details > * { transition: max-height 0.3s; }（<details></details> 不会自动设 max-height）
⚠️ 注意：Safari 对 summary::marker 渲染不稳定，建议统一用 summary::before 控制图标，避免依赖默认三角

多个手风琴项默认多开，要单开得加 JS

<details></details> 之间互不影响，这是设计本意 —— 用户可能想同时比对多个 FAQ 条目。如果你的场景强制要求“一次只开一个”，必须监听 toggle 事件并手动关闭其他项。

监听所有 details 的 toggle 事件，而非 click（toggle 在 JS 调用 open 属性变更时也会触发）
用 querySelectorAll('details[open]') 获取当前已开项，遍历调用 el.removeAttribute('open')；不要用 el.close()，它会再次触发 toggle，导致死循环
如果页面有 10 个面板，仅对当前操作项保留 open，其余清空 —— 这个逻辑必须由 JS 显式控制，<details></details> 本身不提供“单开模式”开关

真正容易被忽略的是：当内容区域含 position: fixed 元素（比如悬浮按钮、Tooltip），用 transform: scaleY() 做动画会导致它们错位；而用 max-height 又得预估高度。多数项目其实不需要“完美动画”，先确保结构语义正确、状态可读、键盘可用，比强行加滑动更重要。