<details>折叠面板无需JS即可运行，但<summary>必须是<details>的第一个且唯一直接子元素；open属性在部分环境失效时可用CSS或JS修复；单开效果需JS监听toggle事件；平滑动画应使用max-height而非height过渡。
直接用 <details> + <summary> 就能在线运行出可用的折叠面板，无需 JS、不依赖任何库，复制粘贴进 HTML 编辑器（如 CodePen、JSFiddle 或浏览器开发者工具的 Elements 面板）立刻生效。
为什么<details>在在线编辑器里点不动
最常见原因是结构写错了：<summary> 必须是 <details> 的**第一个且唯一直接子元素**。下面这些写法都会失效：
-
<details><div><summary>标题</summary></div><p>内容</p></details>（<summary>被<div>包裹） -
<details><h3><summary>标题</summary></h3><p>内容</p></details>（<h3>干扰了父子关系） -
<details><p><summary>标题</summary></p><p>内容</p></details>（<p>是块级元素，不能作为<summary>父容器）
正确写法只有一种：<details><summary>标题</summary><p>内容</p></details> —— 中间不能插任何标签。
在线运行时open属性不生效怎么办
部分在线环境（尤其是旧版 Safari WebView 或某些 CMS 预览模式）会忽略 open 属性。这不是你代码错，是浏览器行为差异。临时解决方法有两个：
立即学习“前端免费学习笔记（深入）”；
- 加 CSS 强制初始可见：
details[open] { display: block; }，再配合details > * { opacity: 1; }防闪动 - 在
<body>底部加一行 JS：document.querySelectorAll('details[open]').forEach(d => d.open = true);
注意：不要用 display: none 控制显隐——它破坏可访问性，键盘用户按空格/回车会无响应。
怎么让多个 FAQ 折叠项单开（手风琴效果）
<details> 默认各自独立，要实现“点一个、关其他”，必须加 JS。但别监听 click，改用 toggle 事件，它兼容键盘操作（空格/回车）且只在状态真正变化后触发：
document.querySelectorAll('.faq-item').forEach(item => {
item.addEventListener('toggle', e => {
if (!e.target.open) return;
document.querySelectorAll('.faq-item').forEach(other => {
if (other !== e.target) other.open = false;
});
});
});关键点：.faq-item 是你给每个 <details> 加的 class；e.target.open === true 才执行关闭逻辑，避免收起时误清状态。
动画一卡一卡的，怎么平滑展开
<details> 本身不支持 height 过渡，强行加 transition: height .3s 没用。真实可行的方案只有两个：
- 用
max-height+overflow: hidden模拟：设一个足够大的值，比如max-height: 600px，再加transition: max-height .3s ease-in-out - 用 JS 动态读取高度：
element.scrollHeight，然后设为max-height再过渡；但要注意图片未加载完时scrollHeight可能偏小，得等load事件或用ResizeObserver
真正容易被忽略的是：如果内容含异步插入的文本或图片，scrollHeight 取值时机不对，动画就会中途截断或跳变。这时候宁可保守设个固定 max-height，也别赌 JS 读取的“实时高度”。
