原生 HTML5 的 details + summary 标签可实现无 JS 折叠展开，语义清晰、无障碍友好、SEO 友好；默认闭合，加 open 属性可默认展开；summary 内不可放 button/a 等交互元素；多组联动需 JS 监听 toggle 事件控制手风琴效果。
用 details + summary 最简实现折叠展开
不用写 JS，不依赖 jQuery，原生 HTML5 就能搞定。浏览器支持已覆盖 Chrome 12+、Firefox 49+、Safari 6.1+、Edge 79+，现代项目可直接用。
核心是把每个问答项包进 details 标签，summary 作为标题栏，点击自动切换展开/收起状态，且自带语义和键盘可访问性（空格/回车触发）。
-
details默认是闭合的，加open属性可默认展开（比如第一个问题常设为 open） -
summary内容会显示为可点击区域，支持内嵌图标、文字加粗等，但不能放button或a这类交互元素（会干扰默认行为） - 展开后的内容区域可自由放任意 HTML：段落、列表、代码块、甚至嵌套另一个
details - 样式上，
summary::marker可控制小箭头（如用display: none隐藏，再用伪元素重绘）
示例：
<details open><summary>咨询提交后多久能收到回复？</summary><p>工作日 2 小时内响应，非工作时间最迟次日 10:00 前。</p> </details>
需要手风琴效果（单开一栏）就得加 JS 控制
原生 details 是独立开关，多个并列时可同时展开。如果希望“点一个，其他自动收起”，必须用 JS 管理状态。
关键不是监听 click，而是监听 toggle 事件——它在用户手动触发展开/收起时才触发，比 click 更准确（排除了 JS 主动调用 open 的干扰）。
- 给所有
details加统一 class（如faq-item），方便批量操作 - 监听父容器的事件委托，避免重复绑定；或遍历所有
details单独监听 - 当前被点开的保持 open，其余全部设
open = false - 注意：不要用
removeAttribute('open')，应直接赋值el.open = false，否则 Safari 有兼容问题
简版逻辑：
document.querySelectorAll('.faq-item').forEach(item => {
item.addEventListener('toggle', () => {
if (item.open) {
document.querySelectorAll('.faq-item').forEach(i => {
if (i !== item) i.open = false;
});
}
});
});
访客咨询表单要嵌在展开区里？注意 form 提交逻辑别被 details 干扰
把 form 放进 details 没问题，但要注意两点：
- 提交按钮点击时，
details不会自动关闭（这是正确行为），但如果页面滚动或焦点丢失，用户可能误以为没反应，建议提交后 JS 主动scrollIntoView()或加 loading 状态提示 - 如果表单含必填字段，提交失败时错误信息要显式插入 DOM，不能只靠
:invalid伪类——因为details闭合时，里面的 invalid 元素不会触发浏览器默认提示 - 移动端键盘弹出可能遮挡 submit 按钮，尤其当
details在视口底部。可监听focus事件对textarea或input做scrollIntoView({block: 'nearest'})
无障碍与 SEO 容易被忽略的细节
搜索引擎能正常索引 details 里的内容，无论是否 open，这点比 JS 切换 class 更友好。但屏幕阅读器体验取决于标记是否规范：
-
summary必须是details的第一个子元素，否则部分读屏器无法识别可展开关系 - 如果 FAQ 有分类（如“支付问题”“技术问题”），用
h3包裹summary，别用div+ CSS 模拟标题 - 不要为了视觉统一，把所有
details默认设为open再用 JS 强制收起——这会让读屏器一次性读出全部内容，失去折叠意义 - 展开动画用 CSS
max-height+transition要小心：原生details不触发height变化，需额外 wrapper 元素包裹内容区
复杂点在于：既要保持语义纯净，又要满足设计动效和交互约束。多数情况下，放弃动画、信任原生行为，反而是更稳的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
