下拉列表不显示的主因是display未正确切换，须用display而非visibility控制显隐，并确保父容器position: relative、z-index足够高；需防事件冒泡、支持键盘操作及焦点管理。
点击按钮后下拉列表不显示？检查 display 和 visibility
最常见的原因是下拉容器默认 display: none，但点击后没正确切换。CSS 的 display 和 visibility 行为完全不同：display: none 会彻底移出文档流，visibility: hidden 还占位但不可见。下拉菜单必须用 display 控制显隐，否则位置、z-index、点击穿透都会出问题。
- 确保按钮和下拉容器在同一个定位上下文里（比如父容器
position: relative） - 下拉容器初始状态设为
display: none，点击后改为display: block（或display: menu在支持的浏览器中） - 避免混用
visibility和display切换，会导致过渡动画失效或点击区域错位
用 JavaScript 绑定 click 事件时，注意事件冒泡导致闪退
点击按钮展开，再点下拉项收起——但实际一点就收，甚至点不到下拉项。这是典型的事件冒泡：点击下拉项触发了外层按钮的 click 监听器，立刻又执行了一次“收起”逻辑。
- 在下拉项的
click处理函数里加event.stopPropagation() - 更稳妥的做法是监听 document 的
click，判断点击目标是否在按钮或下拉容器内，不在则收起 - 不要给按钮写
onclick="toggle()"内联 handler，难以控制事件流，也难调试
下拉菜单定位偏移或被遮挡？z-index 和 position 必须配对设置
下拉列表跑出屏幕、被 header 盖住、或者横向错位，基本都是定位链断裂。绝对定位的下拉容器，依赖父级有 position: relative，且 z-index 值要高于周边元素。
- 父容器（通常是按钮的 wrapper）必须设
position: relative - 下拉容器设
position: absolute+top: 100%（紧贴按钮下方），再加left: 0 -
z-index至少设为1000，避免被框架组件（如 antd、bootstrap 的 navbar）压住 - 如果按钮在 flex 或 grid 容器里，确认父容器没设
overflow: hidden，否则下拉会被裁剪
需要键盘操作支持？别只靠 onclick
仅响应鼠标点击，会让键盘用户（Tab 切换后按 Space/Enter）无法触发下拉，不符合无障碍要求。HTML 原生按钮（<button></button>）默认支持键盘交互，但必须配合正确的 role 和 aria 属性。
- 按钮加上
role="button"和aria-expanded="false"（初始状态） - 下拉容器加
role="menu"，每个选项加role="menuitem" - 监听
keydown事件：对按钮捕获Space和Enter，对下拉捕获Escape收起 - 用
focusout替代单纯点击外部收起，能更好兼容键盘 Tab 离开场景
position: absolute 在 transform 父容器里失效的问题。这些不是“写了就能跑”，得实测。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
