toggle事件仅适用于details元素，无法用于div或button等普通元素，且不提供展开/收起方向参数，需通过open属性判断状态；正确用法是将事件监听绑定在details元素上并配合其语义结构使用。
toggle 事件本身不能直接实现筛选条件的展开/收起交互——它只在 <details></details> 元素状态变化时触发，不负责控制 DOM 显隐逻辑，也不能绑定到普通 <div> 或按钮上。
<h3>为什么不能直接用 toggle 事件控制筛选区</h3>
<p><code>toggle 是 <details></details> 的专属事件，浏览器不会为 div、button 或自定义组件派发它。试图给非 <details></details> 元素监听 toggle（如 el.addEventListener('toggle', ...)）完全无效，也不会报错，容易误以为“写了就生效”。
- 只有
<details></details>元素在用户点击<summary></summary>、按空格/回车、或 JS 修改open属性时才会触发toggle - 它不携带“展开还是收起”的明确方向参数，需靠读取
element.open判断当前状态 - 若筛选区结构不是
<details><summary>...</summary><div class="filters">...</div></details>，toggle就根本不会被触发
正确用 toggle 事件配合 details 实现筛选展开
如果你的筛选区域语义上确实是“可选的、辅助性的、非必需的配置面板”，<details></details> 是最轻量且健壮的选择——不用 JS 就能工作，键盘和屏幕阅读器原生支持。
-
<summary></summary>必须是<details></details>的第一个子元素，否则交互失效 - 监听写法必须绑定在
<details></details>上：detailsEl.addEventListener('toggle', () => { console.log(detailsEl.open); }) - 动态加载筛选项时，不要在
toggle回调里直接innerHTML = data；某些浏览器中多次快速开关可能造成重复插入，应加防重逻辑或用queueMicrotask - 想兼容旧版 Firefox（在 Chrome 12+/Firefox 49+/Safari 6+ 已稳定可用
筛选条件需要多级联动或状态记忆？别硬套 details
当筛选区要支持“多组独立展开”“点击某项自动收起其他”“记住上次展开项”或“与 URL hash 同步”时，<details></details> 的单元素状态模型就不够用了。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 不要尝试嵌套
<details></details>做二级筛选——iOS Safari 和微信 X5 内核下会状态不同步，点开二级后一级莫名关闭 - 避免用
input[type="checkbox"] + label + ~ .filters纯 CSS 方案：它无法响应 JS 控制（比如从 URL 恢复状态），也不支持动画过渡 - 推荐方案：用
button触发，通过classList.toggle('is-open')控制状态，CSS 定义.filters.is-open { max-height: 300px; }，并配合max-height过渡动画 - 关键细节：不要写
transition: height 0.3s——height: auto无法动画，必须用max-height并预估安全上限值（如 300px），同时加overflow: hidden
真正容易被忽略的是：筛选条件展开后，如果内容高度动态变化（比如异步加载后行数增加），max-height 动画会卡顿或截断。这时候得换思路——用 transform: scaleY() 或 JS 测量真实高度再设 max-height，而不是拍脑袋填个固定值。
