用<details>和<summary>可零JS实现语义化、可访问的原生折叠面板，<summary>必须为<details>首个子元素，默认收起，加open属性可默认展开，支持键盘操作与屏幕阅读器，现代浏览器均兼容。
用 details 和 summary 实现最简折叠面板
不用 JS 就能实现按钮式展开/收起，details 是原生语义化方案，兼容性已覆盖所有现代浏览器（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+）。它天然支持键盘操作（空格/回车触发）、屏幕阅读器朗读，且默认可访问性良好。
关键点：summary 必须是 details 的第一个子元素，否则点击无效；details 默认闭合，加 open 属性可默认展开：
<details> <summary>点击展开说明</summary> <p>这里是被折叠的内容，可以是任意 HTML 元素。</p> </details>
-
summary内部可嵌套图标（如<svg>），但不要放button或a，会干扰默认行为 - 若需自定义箭头方向，用 CSS 选中
details[open] summary::after控制，不要用 JS 切换 class 模拟状态 - 不建议给
details设固定高度或overflow: hidden，会破坏原生过渡动画和可访问性
用 JS 控制 details 的展开状态（非必需但有时需要）
虽然 details 自带 toggle 行为，但某些场景需程序化控制：比如页面加载后根据 URL hash 展开特定面板，或响应外部按钮点击。此时直接操作 open 属性即可，无需事件监听器模拟点击。
示例：点击一个独立按钮，控制某个 details 展开：
立即学习“前端免费学习笔记（深入）”；
<button onclick="document.getElementById('panel-1').toggleAttribute('open')">切换面板一</button>
<details id="panel-1">
<summary>面板一标题</summary>
<p>内容...</p>
</details>
- 用
toggleAttribute('open')比手动判断再设值更简洁安全 - 避免写
element.open = true/false—— 这不会触发toggle事件，且在某些旧 Safari 版本中不可靠 - 如果多个面板需「单选展开」，JS 中需遍历其他
details并移除它们的open属性
用纯 CSS + checkbox 模拟（仅当 details 不可用时备用）
极少数情况要兼容 IE 或老安卓 WebView（details 完全不支持），可用隐藏 checkbox + :checked + 相邻兄弟选择器实现。但它无法聚焦、不被屏幕阅读器识别为可交互控件，属于降级方案。
核心结构依赖 input[type="checkbox"] 和 label 绑定，再用 ~ 选择器控制后续内容块的 max-height 和 opacity：
<input type="checkbox" id="faq1" class="faq-toggle"> <label for="faq1">常见问题一</label> <div class="faq-content"><p>答案内容...</p></div>
- CSS 中必须设
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }，仅靠height无法动画 -
label必须紧跟input后，否则~选择器失效 - 该方案无法键盘操作（Tab 到 label 可聚焦，但空格不触发），需额外加
role="button"和onkeydown处理，复杂度陡增
为什么别用 display: none/block 做折叠动画
直接切 display 会导致无法做 CSS 过渡（display 不是可动画属性），强行加 transition 无效。用户看到的是突兀闪现，且影响 SEO（搜索引擎可能忽略 display: none 内容）。
- 正确做法是结合
max-height（设足够大的值，如500px）+overflow: hidden+transition - 若内容高度差异大，
max-height设太小会截断，设太大则收起动画过慢；details原生方案自动处理这点，无此顾虑 - 用
visibility: hidden+height也不行 ——visibility不触发布局重排，高度变化仍不可见
真正需要自定义动效或深度集成到已有 JS 架构时，才值得放弃 details；日常使用，它就是那个被忽略但最稳的选项。
