使用 details 元素可原生实现可访问、语义化的折叠筛选栏，无需 JS；需正确使用 open 属性、summary 子元素、属性选择器定制样式，并谨慎处理嵌套与事件监听。
折叠展开用 details 元素最省事
不用写 JS、不依赖框架，原生 HTML 就能实现带分类标题的可折叠筛选栏。details 是语义化标签，内置展开/收起逻辑，浏览器默认支持，且天然适配键盘（空格/回车切换）和屏幕阅读器。
常见错误是手动用 div + JS 模拟，结果 tabindex、aria-expanded、焦点管理全漏掉，既费劲又不可访问。
-
details默认收起，加open属性可默认展开 -
summary必须是details的第一个子元素，点击它触发切换 - 内部可放任意 HTML：复选框、单选按钮、搜索输入框等筛选控件
- Chrome/Firefox/Safari/Edge 全支持，IE 不支持（需降级为静态列表）
样式定制要改 summary::marker 和 details[open]
默认箭头难看、颜色不统一？不能直接用 class 控制展开状态，得靠属性选择器和伪元素。
容易踩的坑是只写 summary { ... }，结果展开/收起时图标不动、文字没缩进、过渡动画失效。
- 隐藏原生 marker：
summary::marker { content: ""; } - 自定义图标（如 + / −）：
summary::before { content: "▶"; }，再用details[open] summary::before { content: "▼"; } - 加过渡效果必须作用在内容区，不是
details本身：details > * { transition: max-height 0.2s ease-in-out; }，再配合overflow: hidden和动态max-height（需 JS 或 CSS 自定义属性辅助） - 移动端点按区域小？给
summary加padding，别只靠文字触发
需要 JS 控制时优先用 toggleAttribute("open")
比如“清空筛选”后自动收起所有分类，或“显示全部”一键展开——这时才需要 JS，但依然不该重做折叠逻辑。
别用 element.setAttribute("open", "") 或 removeAttribute，它们不触发浏览器内置行为，可能破坏可访问性状态。
- 正确做法：
document.querySelector("details.category-price").toggleAttribute("open"); - 监听展开事件用
toggle事件：detailsEl.addEventListener("toggle", () => { console.log(detailsEl.open); }); - 批量操作时注意：不要用
forEach遍历后统一设open = true，应逐个调用toggleAttribute，否则部分浏览器可能不触发重排 - 避免在
toggle事件里再调用toggleAttribute，会死循环
复杂筛选栏慎用嵌套 details
像“地区 → 省 → 城市 → 区县”这种多级结构，看似适合嵌套 details，但实际体验差：父级收起时子级状态丢失、键盘导航混乱、iOS Safari 有渲染 bug。
真正可用的方案是平级 details + JS 协调（例如点击“地区”后自动收起“价格”“品牌”），或者直接上轻量组件库（如 htmx + 服务端片段）。
- 嵌套后
summary的 focus 管理不可靠，用户 Tab 键可能跳过中间层级 - 没有标准方式让“父展开时子默认关闭”，得额外监听 + 手动控制，代码变重
- 如果必须嵌套，至少给每层加唯一
id和aria-controls关联，否则读屏软件无法理解层级关系
细节决定是否真能用：比如 summary 里放 input 会导致点击输入框也触发折叠，得加 event.stopPropagation()；又比如 SSR 渲染时 open 属性若由 JS 动态添加，首屏会闪动。这些都不是“会写就行”的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
