<details>可实现折叠面板但需优化：补全可访问性属性、用max-height实现动画、延迟处理多面板互斥、扩大移动端点击区域，并避免overflow: hidden裁剪浮层。
details 标签本身就能做折叠面板，但默认样式太简陋
直接用 <details> + <summary> 就能实现基础折叠，但浏览器默认的三角图标、间距和焦点样式在表单场景里很突兀。关键是它不支持「默认展开」以外的更多状态控制——比如你想让多个面板同时展开，或者点击空白区域也收起，就得靠 CSS 和少量 JS 补足。
常见错误是只写 <details><summary>筛选条件</summary><div>...</div></details>，结果发现：点击 <div> 内部的 checkbox 没反应、键盘无法操作、移动端点按反馈弱。
实操建议：
- 始终给
<summary>加role="button"和tabindex="0"，确保键盘可聚焦、屏幕阅读器识别为按钮 - 用
details[open] > summary::after覆盖默认箭头，比全局重置list-style更稳妥 - 避免把整个筛选表单（含 label、input）塞进
<summary>里——会破坏语义，且点击 input 时可能意外触发折叠
用 CSS 控制折叠动画，但不能直接 transition height
<details> 的展开/收起是浏览器原生行为，height 是自动计算的 auto，没法直接加 transition。硬写 transition: height 0.3s 会导致动画卡顿或失效。
立即学习“前端免费学习笔记（深入）”；
正确做法是用 max-height 配合溢出隐藏，配合 JS 监听 toggle 事件来补全过渡时机：
details {
overflow: hidden;
}
details[open] {
/* 设一个足够大的 max-height，覆盖内容最大可能高度 */
max-height: 500px;
transition: max-height 0.3s ease-in-out;
}
details:not([open]) {
max-height: 0;
transition: max-height 0.3s ease-in-out;
}注意：这个值不能设太小（否则内容被截），也不能设极大（比如 10000px），否则动画时间会失真。500px 对多数筛选面板够用；如果内容动态加载，就得 JS 测高后注入内联样式。
多个筛选面板共存时，别用 details.open = true 全局控制
想实现「点一个面板，其他全部收起」？别直接遍历所有 <details> 然后设 open = false。这样会打断用户正在操作的输入框焦点，尤其当某个面板里有搜索框正在打字时，突然收起会让输入法中断、光标丢失。
更稳妥的方式是监听 click 在 <summary> 上，只对「非当前面板」调用 removeAttribute('open')，并加个小延迟：
document.querySelectorAll('details').forEach(panel => {
panel.querySelector('summary').addEventListener('click', () => {
setTimeout(() => {
document.querySelectorAll('details').forEach(p => {
if (p !== panel && p.hasAttribute('open')) {
p.removeAttribute('open');
}
});
}, 10);
});
});这个 10ms 延迟能避开浏览器原生 toggle 触发时机，防止刚点开就又被关掉。
移动端点按区域太小，summary 必须撑满宽度
默认 <summary> 是 inline 元素，左右 padding 很窄，在手机上很难精准点击。很多用户点了几下没反应，以为功能坏了。
必须显式设置：
details > summary {
display: block;
padding: 12px 16px;
width: 100%;
box-sizing: border-box;
}另外，iOS Safari 对 <summary> 的 touch 响应有延迟，加 cursor: pointer 和 -webkit-tap-highlight-color: transparent 能改善反馈感。别依赖 hover 效果做交互提示——移动端没有 hover。
复杂点在于：如果你的筛选项里有日期选择器、下拉多选组件，它们的浮层（popover）可能被 <details> 的 overflow: hidden 剪掉。这时候得把浮层移到 body 下，并用 position: fixed + 动态计算位置，而不是留在 details 内部。
