点击触发的下拉菜单不必用javascript，纯css可通过:checked伪类配合隐藏复选框与label实现；桌面端用:hover，移动端用checkbox模拟点击态，需注意ios点击后失焦导致收起的问题。
点击触发的下拉菜单必须用 JavaScript 吗？
不用。纯 CSS 能实现，但前提是放弃“点击展开”在所有浏览器中的完美一致性——:focus-within 和 :hover 是核心，而真正的点击切换（如移动端 tap 后保持展开）需要 <input type="checkbox"> 配合 :checked 模拟状态。别被“纯 CSS”误导：它不等于“无交互元素”，而是指不写 JS 逻辑。
常见错误是直接对 <nav></nav> 或 <ul></ul> 写 :hover > ul，结果在移动端完全失效（没有 hover），且 Safari iOS 对 :hover 有延迟或需点击激活。
- 桌面端优先用
:hover，简洁可靠 - 移动端必须用
<input type="checkbox" id="menu-toggle">+label[for="menu-toggle"]控制显隐 - 避免依赖
touchstart或click的 CSS 伪类（它们不存在）
怎么用 checkbox 实现可点击的下拉开关？
本质是把“是否展开”这个布尔状态映射到一个可被 CSS 读取的 DOM 属性上。<input type="checkbox"> 的 :checked 状态就是最稳妥的选择。关键在于隐藏原生 checkbox，用 label 触发它，并用相邻兄弟选择器（~）控制下拉内容的显示。
<input type="checkbox" id="nav-toggle"><label for="nav-toggle">☰</label>
<nav class="dropdown-nav"><ul>
<li><a href="#">首页</a></li>
<li class="has-dropdown">
<a href="#">产品</a>
<ul class="dropdown-menu">
<li><a href="#">Web</a></li>
<li><a href="#">App</a></li>
</ul>
</li>
</ul></nav>
对应 CSS 中，用 #nav-toggle:checked ~ .dropdown-nav .dropdown-menu 控制显示，而不是尝试用 :hover 去模拟点击态。
-
label必须有for属性且值与input的id严格匹配 -
input必须在 DOM 中位于.dropdown-menu的前面（否则~无法选中） - 记得加
display: none隐藏input，但不要用visibility: hidden或opacity: 0，否则部分 Android 浏览器可能无法触发
如何让下拉菜单在小屏收起、大屏悬停展开？
靠媒体查询 + 两种触发方式共存。小屏（比如 max-width: 768px）启用 checkbox 控制；大屏则关闭 checkbox 的影响，改用 :hover，同时隐藏 toggle 按钮。
注意：不能只写 @media (min-width: 769px) { .dropdown-menu { display: block; } } —— 这会让下拉菜单永远可见。必须配合选择器条件，例如：
@media (min-width: 769px) {
#nav-toggle,
label[for="nav-toggle"] {
display: none;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
display: block;
}
}
-
:focus-within是重要补充：键盘用户 tab 到子菜单链接时也能展开，提升可访问性 - 避免在大屏上保留 checkbox 逻辑，否则鼠标悬停时菜单闪动（hover 显，移开又因 checkbox 未选中而隐）
- 下拉菜单的
position: absolute必须配合top: 100%和left: 0，否则在 flex 导航中容易错位
为什么下拉菜单在 iOS 上点一下就收？
因为 iOS Safari 默认会在点击后触发一次 :active 然后快速失焦，导致基于 :checked 的菜单在点击子项后 checkbox 自动取消勾选。根本原因不是 CSS，而是表单提交或页面跳转重置了状态。
解决方法只有两个：一是确保所有 <a></a> 链接都带 href（哪怕只是 #），并阻止默认行为（但这又绕回 JS）；二是接受现状，改用更保守的交互模式——即：移动端下拉菜单只负责导航入口，不承载操作，点子项直接跳转，不依赖“保持展开”。
- 纯 CSS 方案里，iOS 上“点击展开 → 点击子项 → 保持展开”本质上不可靠
- 如果业务强依赖该交互，请直接上 JS（用
classList.toggle()控制aria-expanded和类名） - 用
pointer-events: none在子菜单上临时禁用点击不是解法，它会破坏可访问性
真正麻烦的从来不是怎么写出来，而是怎么在 Safari iOS、旧版 Android WebView、以及屏幕阅读器之间取得最小可行交集。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
