应优先使用原生实现折叠功能，因其支持键盘操作、无障碍朗读、SEO友好且无需JS；禁用display:none控制折叠，避免可访问性、SEO及交互问题；必须包含且为其首个子元素，建议显式添加role="button"和aria-expanded属性。
直接用
<details></details>>，别写 JS 切换 class 或 jQuery toggle——它原生支持键盘操作、无障碍朗读、SEO 友好，且一行 HTML 就能跑起来。</p> <H3>为什么不能用 <code>display: none控制折叠
常见错误是把“营养成分”“小贴士”这类内容包在 <div class="foldable" style="display:none"> 里，靠 JS 切换样式。这会导致：
<ul>
<li>屏幕阅读器仍会读出全部内容（<code>display: none 不影响可访问性树）
Tab 键会跳进不可见区域，用户卡住
<details></details> 的正确写法和必须加的属性
结构必须包含 <summary></summary>，且不能省略；否则无法触发展开逻辑，也不符合语义。
-
<details></details>默认收起，无需 JS 初始化 -
<summary></summary>必须是<details></details>的第一个子元素，否则部分浏览器不识别 - 建议给
<summary></summary>加role="button"和aria-expanded（虽然浏览器自动补，但显式声明更稳） - 若需默认展开，加
open属性：<details open></details>
示例：
立即学习“前端免费学习笔记（深入）”；
<details>
<summary>营养成分表</summary>
<table aria-label="每100g食物所含营养成分">
<tr><td>热量</td><td>320kcal</td></tr>
</table>
</details>
怎么让多个 <details></details> 实现手风琴效果
原生 <details></details> 不自带互斥逻辑，要手风琴（点一个关其他），得用 JS 监听 toggle 事件并手动控制。
- 监听
document.querySelectorAll('details')上的toggle事件 - 在事件回调里遍历所有
<details></details>，对非当前项调用el.removeAttribute('open') - 避免用
el.open = false，某些旧版 Safari 不响应属性赋值 - 不需要防抖或节流——
toggle事件只在用户真实点击/空格/回车时触发一次
注意：如果页面有服务端渲染（SSR），JS 执行前所有 <details></details> 都是收起态，不会闪开再关，这点比 JS 方案干净得多。
移动端适配和容易被忽略的细节
<details></details> 在 iOS Safari 和安卓 Chrome 上都支持良好（2026 年已全覆盖），但要注意：
- 不要嵌套
<details></details>—— 某些安卓 WebView 会丢失内层 summary 的点击响应 - 避免在
<summary></summary>里放<button></button>或<a></a>，会干扰原生展开行为 - 用 CSS 自定义箭头时，记得重置
list-style并加cursor: pointer，否则部分安卓机点击无反馈 - 如果内容含图片或 iframe，务必加
loading="lazy"，否则折叠状态下仍会加载资源
最常漏的是：没给 <summary></summary> 加明确文案，比如只写“点击展开”，而应该写“查看配送与售后政策”——语义越具体，屏幕阅读器和 SEO 效果越好。
