details和summary是HTML5原生语义化折叠方案，无需JS即可实现点击展开/收起，默认收起、summary必须为details首个子元素，加open属性可默认展开。

用 details 和 summary 最快实现折叠展开

不用 JS，纯 HTML 就能做基础折叠展开，details 是唯一原生语义化方案。它默认收起，点击 summary 标题展开内容，浏览器自动处理状态和箭头图标。

常见错误是把 summary 写成独立标签、或放在 details 外面——它必须是 details 的第一个子元素，否则不生效：

<details>
  <summary>点击展开说明</summary>
  <p>这里是被折叠的内容</p>
</details>

• details 默认有上下边距和内边距，用 CSS 清除需注意 summary::marker 控制箭头显示
• 想默认展开？加 open 属性：<details open></details>
• Safari 旧版本对 summary 内嵌按钮/链接支持不稳定，避免在里面放 button 或 a

需要 JS 控制时，别直接操作 display 属性

手动切 display: none/block 会丢失过渡动画、破坏可访问性（ARIA 状态不同步），也绕过了浏览器对 details 的原生逻辑。

立即学习“前端免费学习笔记（深入）”；

正确做法是用 JS 操作 open 属性，并配合 CSS 过渡控制内容区高度变化：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

<details id="faq1">
  <summary>问题一</summary>
  <div class="details-content">答案内容...</div>
</details>

然后用 JS 切换：

document.getElementById('faq1').toggleAttribute('open');

• 监听展开事件用 toggle 事件，不是 click：el.addEventListener('toggle', ...)
• 若要加淡入/滑动效果，得用 max-height + transition，但需预设高度值或用 JS 测量——纯 CSS 无法对 height: auto 做过渡
• 多个折叠项共用同一份 JS？给它们加统一 class，用 querySelectorAll('.js-accordion') 批量绑定

IE 不支持 details，降级方案怎么写

IE 完全不识别 details 标签，会把它当普通容器渲染，内容始终可见，且无交互。不能只靠 CSS 降级，必须 JS 补足行为。

检测方式很简单：

if (!('open' in document.createElement('details'))) { /* 加载 polyfill 或手动实现 */ }

• 轻量替代：用 div + ARIA 属性模拟，例如 <div role="region" aria-expanded="false">，再手动绑定 click 和切换 <code>aria-expanded
• 别引入整套 polyfill 库——就几行 JS 能解决的事，比如监听点击、切换 class、用 getBoundingClientRect() 控制高度动画
• 如果项目已用 jQuery，.slideToggle() 是最省事的降级写法，但注意它不更新 ARIA 状态，得额外补上 attr('aria-expanded', ...)

移动端点击区域太小，怎么扩大可点范围

summary 默认只有文字区域响应点击，手指点不准很容易失效。不能只靠 padding，因为部分浏览器（如 iOS Safari）对 summary::marker 的点击热区处理异常。

• 给 summary 设 display: block，再加 padding 和 margin，确保最小点击尺寸 ≥ 44×44px
• 更稳妥：在外层包一层 div，监听它的 click 并调用 details.toggleAttribute('open')，同时设 role="button" 和 tabindex="0" 保证键盘可访问
• 避免在 summary 里用 float 或 position: absolute，会导致点击区域错位

折叠展开看着简单，但跨浏览器一致性、触控友好性、无障碍支持这三点，最容易在上线后才暴露问题。