下拉菜单点击后不收起的主因是事件冒泡未阻止或绑定错误，修复需在面板点击中加e.stoppropagation()、用click代替blur、改用事件委托；原生select样式受限，应改用button+ul结构并完善aria属性；键盘导航需preventdefault、维护focusedindex、处理tab焦点；移动端应统一用touchstart并避免transform干扰。
下拉菜单点击后不收起，常见原因和修复方式
多数时候不是代码写错了，而是 event.stopPropagation() 没加，或者点击事件绑定在了错误的元素上。浏览器默认点击 select 元素会触发原生下拉，但自定义下拉（比如用 div + ul 实现）必须手动控制显隐，而点击选项时若事件冒泡到外层容器，可能立刻触发隐藏逻辑。
实操建议：
- 给下拉面板（如
ul.dropdown-menu）的点击事件加e.stopPropagation()，防止穿透到 document 的隐藏监听器 - 用
click代替blur做收起判断——blur在移动端不可靠，且焦点切换时序难控 - 避免对
document直接绑click，改用事件委托：监听body或父容器，再用e.target.closest('.dropdown')判断是否点在非下拉区域
原生 select 元素样式无法覆盖？绕过方案
Chrome 和 Safari 对 select 的 appearance 控制极弱，尤其箭头图标、内边距、聚焦轮廓几乎不可定制。强行用 -webkit-appearance: none 只能去掉默认样式，但会丢失可访问性支持（如屏幕阅读器识别）和部分平台行为（如 iOS 点击唤起滚轮选择器）。
实操建议：
- 若需深度定制外观，放弃原生
select，改用button+ul+li结构，并为button显式设置role="combobox"和aria-expanded - 保留原生
select仅用于表单提交场景，用visually-hidden类隐藏它，再用自定义 UI 同步其value和selectedIndex - 务必为每个选项添加
role="option"和aria-selected，否则键盘导航（Tab/Arrow）会失效
keydown 处理下拉键盘导航时的焦点陷阱
用户按 ArrowDown 时，焦点应移到第一个选项；按 Enter 或 Space 应选中当前高亮项。但常见错误是：焦点跳到选项后没阻止默认滚动、没更新 aria-selected、或按 Tab 时焦点直接跳出整个组件。
实操建议：
- 监听
keydown事件时，对ArrowUp/ArrowDown调用e.preventDefault()，避免页面滚动 - 维护一个
focusedIndex变量，按方向键递增/递减，用options[focusedIndex].focus()主动聚焦 -
Tab键应只在下拉展开时被捕获：检测e.key === 'Tab'且isDropdownOpen === true，然后根据方向（e.shiftKey）决定向上/向下循环焦点
移动端点击穿透与 touchstart 冲突
iOS Safari 中，click 事件有约 300ms 延迟，且 click 和 touchstart 可能同时触发，导致下拉开合异常（比如点一次开两次、或点开后立刻关闭）。更麻烦的是，某些手势库（如 Hammer.js）或 CSS transform 会干扰原生点击区域判定。
实操建议：
- 统一用
touchstart替代click绑定下拉开关，但加e.preventDefault()防止缩放或滚动干扰 - 为按钮添加
cursor: pointer和-webkit-tap-highlight-color: transparent，消除点击反馈延迟 - 避免在下拉容器上设
transform: translateZ(0)或will-change，这些会创建新图层，导致 iOS 下 touch 区域偏移
真正难的不是让下拉“动起来”，而是让它在各种输入方式（鼠标、键盘、触摸）、各种辅助技术（VoiceOver、TalkBack）、各种浏览器渲染差异下，都保持一致的行为边界。别急着封装组件，先在真实设备上反复点十次、按十次方向键、用 VoiceOver 跑一遍流程——漏掉的往往不是代码，是某台 iPad 上那个没被触发的 touchend。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
