核心是通过JavaScript切换开关类名（如is-open）控制显示，而非直接操作display/visibility；需结合事件委托判断点击区域、支持键盘访问、避免DOM直接操作，并确保移动端与SSR兼容。
点击按钮触发下拉菜单的 DOM 控制逻辑
核心是切换菜单容器的 display 或 visibility 状态，而不是靠 CSS :hover——因为鼠标移开时容易误收起。推荐用 JavaScript 控制一个开关类名（如 is-open），再由 CSS 定义该类下的显示行为。
常见错误：直接写 element.style.display = 'block' 后，后续无法用 CSS 过渡动画；或者用 toggleAttribute('hidden') 但没配好 CSS 的 [hidden] 样式。
- 按钮绑定
click事件，调用classList.toggle('is-open') - 菜单元素用
position: absolute+top: 100%对齐按钮下方 - CSS 中定义
.menu { opacity: 0; transform: scaleY(0); transition: all 0.2s ease; }和.menu.is-open { opacity: 1; transform: scaleY(1); } - 避免用
visibility: hidden切换——它不触发重排，但无法配合transform动画做缩放效果
防止点击空白处意外关闭菜单的事件委托处理
用户点菜单内部链接或输入框时，不该关闭；只有点按钮以外、菜单以外的区域才关闭。不能只监听 document.click，否则会和菜单内交互冲突。
正确做法是：在按钮和菜单共用的父容器上监听 click，然后用 event.target 判断点击是否落在菜单或按钮之外。
立即学习“前端免费学习笔记（深入）”；
- 给按钮和菜单包裹一层
<div class="dropdown"> - 监听
dropdown.addEventListener('click', e => { if (!e.target.closest('.dropdown-menu') && !e.target.matches('.dropdown-button')) { menu.classList.remove('is-open'); } }) - 不要用
document.addEventListener('click', ...)—— 页面其他区域点击也会触发，干扰表单等正常操作 - 移动端需额外处理
touchstart，避免 click 延迟导致响应滞后
键盘可访问性（Enter/Space 展开，Esc 关闭）必须补全
纯鼠标方案对键盘用户不友好。按钮必须是 button 元素（不是 div），且菜单要支持焦点管理。
- 按钮加
aria-expanded="false"，点击后同步更新为true或false - 监听按钮的
keydown，对Enter和Space键触发展开/收起 - 监听
document的keydown，捕获Escape并关闭菜单（注意：仅当菜单打开时生效） - 菜单打开后，用
menu.firstElementChild?.focus()把焦点移到第一个可聚焦项，否则键盘用户无法用 Tab 进入菜单 - 菜单关闭时，焦点应回到原按钮，否则焦点会丢失到页面顶部
React/Vue 等框架里别手写 toggle 类名
框架里直接操作 DOM 类名容易和状态不同步。比如 React 中用 useState 控制布尔值，再用条件渲染或 className 拼接更可靠。
常见坑：用 useEffect 监听状态变化去手动 add/remove 类名——这绕过了框架的更新机制，可能引发竞态或重复执行。
- React 示例：
className={`menu ${isOpen ? 'is-open' : ''}`}或使用clsx库 - Vue 示例：
:class="{ 'is-open': isOpen }" - 避免在组件卸载后还尝试修改 DOM（如异步回调里操作
classList），加isMounted判断或用useEffect清理函数 - SSR 场景下，初始状态必须服务端和客户端一致，否则 hydration 会警告
position: absolute 容易被裁剪，focusout 事件边界模糊，还有 Safari 对 transform 动画的渲染抖动。这些细节不测真机很容易漏。 
