必须用JS控制类名切换来实现点击后菜单项持久高亮，因CSS的:active仅瞬时生效；需监听click/touchstart、防止默认行为、用classList.toggle、事件委托及实例隔离避免状态污染。
点击后如何让菜单项保持高亮？
纯 CSS 无法维持“点击后高亮”状态，:active 只在按压瞬间触发，松手即失效；持久高亮本质是状态管理，必须靠 JS 控制类名切换。
常见错误是误以为加个 :checked + label 就能通用——它只对 <input type="radio"> 在 <label></label> 前面的结构有效。其他场景一律用 JS。
- 监听
click（桌面）和touchstart（移动端），并调用preventDefault()防止滚动干扰 - 用
element.classList.toggle("is-active")切换状态，避免硬编码样式 - 动态渲染的菜单，别每次插入都
addEventListener，改用事件委托绑定到父容器 - 多个菜单共存时，确保每个实例维护独立的
this._isActive，不共享全局变量
下拉菜单中选中项怎么同步更新按钮文本？
核心不是改 DOM 文本，而是建立“选项点击 → 触发器更新 → 菜单收起”的闭环逻辑。原始结构里按钮和下拉内容常是兄弟关系，JS 必须能精准定位对应元素。
典型错误是用 document.getElementById("myDropdown") —— 多个下拉时 ID 重复会导致只操作第一个，后续全部失效。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 改用相对定位：从
e.target向上找最近的.dropdown容器，再查其子元素.dropbtn - 更新按钮文本用
buttonEl.innerText = e.target.innerText，别用innerHTML防 XSS - 收起动作必须紧随更新之后，调
dropdownContentEl.classList.remove("show") - 若按钮本身是
<button></button>，记得加type="button"，避免表单默认提交
:active 伪类为什么点不动、没反应？
:active 不是“选中态”，它是瞬时按压反馈，没有 transition 就等于没写；漏掉 cursor: pointer 会让用户根本不知道能点。
移动端更麻烦：touchstart 后若没设 touch-action: manipulation，可能延迟 300ms 才触发，甚至完全不响应。
- 必须给目标元素显式声明
cursor: pointer（尤其<div> 类按钮） <li> <code>transition至少覆盖变化属性，例如background-color 0.12s ease或transform 0.1s - 避免只写
:hover代替:active，两者语义和触发时机完全不同 - 无障碍要求：键盘
Enter/Space无法触发:active，如需支持，得额外监听keydown - 每个菜单实例应有唯一标识（如
data-menu-id="main-1"），高亮类名带上前缀，例如is-active-main-1 - 展开/收起逻辑里，先遍历其他实例调
close()，而不是简单删所有.is-active - 使用
addEventListener时保存 handler 引用，销毁前用removeEventListener清理 - 避免用
querySelectorAll(".is-active")全局查找，改用this.container.querySelectorAll(".is-active")
如何避免高亮状态跨菜单污染？
多个下拉或侧边栏菜单共存时，“点开 A，B 也高亮”往往是因为用了全局 class 名（如 .is-active）且没做实例隔离，或者事件监听没清理。
最隐蔽的坑是：组件销毁后监听器还在，导致旧菜单项点击仍影响新渲染的菜单。
