toggle事件仅适用于details元素，无法用于div或button等普通元素，且不提供展开/收起方向参数，需通过open属性判断状态；正确用法是将事件监听绑定在details元素上并配合其语义结构使用。

toggle 事件本身不能直接实现筛选条件的展开/收起交互——它只在

元素状态变化时触发，不负责控制 DOM 显隐逻辑，也不能绑定到普通

或按钮上。

为什么不能直接用 toggle 事件控制筛选区

toggle 是

的专属事件，浏览器不会为 div、button 或自定义组件派发它。试图给非

元素监听 toggle（如 el.addEventListener('toggle', ...)）完全无效，也不会报错，容易误以为“写了就生效”。

• 只有
  元素在用户点击
  、按空格/回车、或 JS 修改 open 属性时才会触发 toggle
• 它不携带“展开还是收起”的明确方向参数，需靠读取 element.open 判断当前状态
• 若筛选区结构不是
  ...

  ...
  ，toggle 就根本不会被触发

正确用 toggle 事件配合 details 实现筛选展开

如果你的筛选区域语义上确实是“可选的、辅助性的、非必需的配置面板”，

是最轻量且健壮的选择——不用 JS 就能工作，键盘和屏幕阅读器原生支持。

• 必须是
  的第一个子元素，否则交互失效
• 监听写法必须绑定在
  上：detailsEl.addEventListener('toggle', () => { console.log(detailsEl.open); })
• 动态加载筛选项时，不要在 toggle 回调里直接 innerHTML = data；某些浏览器中多次快速开关可能造成重复插入，应加防重逻辑或用 queueMicrotask
• 想兼容旧版 Firefox（
  在 Chrome 12+/Firefox 49+/Safari 6+ 已稳定可用

筛选条件需要多级联动或状态记忆？别硬套 details

当筛选区要支持“多组独立展开”“点击某项自动收起其他”“记住上次展开项”或“与 URL hash 同步”时，

的单元素状态模型就不够用了。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 不要尝试嵌套
  做二级筛选——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，而不是拍脑袋填个固定值。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！