应优先使用原生实现折叠功能，因其支持键盘操作、无障碍朗读、SEO友好且无需JS；禁用display:none控制折叠，避免可访问性、SEO及交互问题；必须包含且为其首个子元素，建议显式添加role="button"和aria-expanded属性。

直接用

display: none

控制折叠

常见错误是把“营养成分”“小贴士”这类内容包在

里，靠 JS 切换样式。这会导致：

• 屏幕阅读器仍会读出全部内容（display: none 不影响可访问性树）
• 搜索引擎可能判定为隐藏文本，降权风险高
• 移动端双击放大时，隐藏区域仍占文档流位置，造成视觉错位
• 没有键盘焦点管理，Tab 键会跳进不可见区域，用户卡住

的正确写法和必须加的属性

结构必须包含

，且不能省略；否则无法触发展开逻辑，也不符合语义。

• 默认收起，无需 JS 初始化
• 必须是
  的第一个子元素，否则部分浏览器不识别
• 建议给
  加 role="button" 和 aria-expanded（虽然浏览器自动补，但显式声明更稳）
• 若需默认展开，加 open 属性：

示例：

<details><summary>营养成分表</summary><table aria-label="每100g食物所含营养成分"><tr>
<td>热量</td>
<td>320kcal</td>
</tr></table></details>

怎么让多个

实现手风琴效果

原生

不自带互斥逻辑，要手风琴（点一个关其他），得用 JS 监听 toggle 事件并手动控制。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 监听 document.querySelectorAll('details') 上的 toggle 事件
• 在事件回调里遍历所有
  ，对非当前项调用 el.removeAttribute('open')
• 避免用 el.open = false，某些旧版 Safari 不响应属性赋值
• 不需要防抖或节流——toggle 事件只在用户真实点击/空格/回车时触发一次

注意：如果页面有服务端渲染（SSR），JS 执行前所有

都是收起态，不会闪开再关，这点比 JS 方案干净得多。

移动端适配和容易被忽略的细节

在 iOS Safari 和安卓 Chrome 上都支持良好（2026 年已全覆盖），但要注意：

• 不要嵌套
  —— 某些安卓 WebView 会丢失内层 summary 的点击响应
• 避免在
  里放 或 ，会干扰原生展开行为
• 用 CSS 自定义箭头时，记得重置 list-style 并加 cursor: pointer，否则部分安卓机点击无反馈
• 如果内容含图片或 iframe，务必加 loading="lazy"，否则折叠状态下仍会加载资源

最常漏的是：没给

加明确文案，比如只写“点击展开”，而应该写“查看配送与售后政策”——语义越具体，屏幕阅读器和 SEO 效果越好。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！