本文介绍一种完全基于 css 的汉堡菜单切换方案，通过 :checked 伪类与合理 dom 结构实现单击即开、再击即关的流畅交互，彻底规避 javascript 事件冲突和状态同步问题。
本文介绍一种完全基于 css 的汉堡菜单切换方案，通过 :checked 伪类与合理 dom 结构实现单击即开、再击即关的流畅交互，彻底规避 javascript 事件冲突和状态同步问题。
传统混合使用 jQuery 与 CSS :checked 的方式极易引发状态不一致——例如你遇到的“需双击才生效”问题，本质是 jQuery 手动控制 .show()/.hide() 与 CSS 原生 #toggle:checked ~ .MainMenu 规则发生竞争：JS 强制显示元素时，并未同步更新 <input type="checkbox"> 的 checked 状态，导致后续 CSS 规则失效；而用户再次点击 label 时，浏览器虽触发 checkbox 切换，但 JS 逻辑可能因重复绑定或 DOM 状态混乱而响应滞后。
✅ 正确解法是放弃 JS 控制显隐，交由 CSS 原生接管，仅用语义化 HTML + 精准选择器完成全部交互：
✅ 推荐结构与核心原理
<input id="menu-toggle" type="checkbox" />
<label id="btn-hamburger" for="menu-toggle">
<img src="/img/image%208.png" alt="☰ hamburger menu">
</label>
<div id="menu-wrapper">
<div id="menu">
<!-- 菜单项 -->
{{ range .Site.Menus.main }}
<a href="{{ .URL }}" class="menu-item">{{ .Name }}</a>
{{ end }}
<!-- 关闭按钮（复用同一 checkbox） -->
<label for="menu-toggle" class="menu-close" title="Close menu">×</label>
</div>
</div>? 关键设计点：
- <input> 必须位于最顶层（无父容器包裹），确保 ~（通用兄弟选择器）能正确匹配后续兄弟元素；
- #menu-wrapper 包裹遮罩层与菜单，统一控制进出动画；
- 关闭按钮直接复用 for="menu-toggle"，点击即取消选中，无需额外 JS。
✅ 核心 CSS（零 JS，高兼容）
/* 隐藏 checkbox，但保留其功能 */
#menu-toggle { display: none; }
/* 汉堡图标样式 */
#btn-hamburger {
font-size: 2.4rem;
color: #000;
cursor: pointer;
z-index: 1000;
display: inline-block;
user-select: none;
}
/* 遮罩层 + 菜单容器 */
#menu-wrapper {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100dvh; /* 推荐使用 dvh 防止 iOS Safari 视口缩放问题 */
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
translate: 100% 0; /* 更现代、性能更好的位移写法（等价于 transform: translateX(100%)） */
transition: translate 0.4s ease, opacity 0.4s ease;
pointer-events: none; /* 让点击穿透到下方内容（菜单打开时禁用此行） */
}
/* 菜单主体 */
#menu {
position: absolute;
top: 0; right: 0;
width: 320px;
height: 100dvh;
background-color: #222;
color: #fff;
overflow-y: auto;
box-shadow: 0 0 2px rgba(0,0,0,0.3);
z-index: 1001;
pointer-events: auto; /* 确保菜单内链接/按钮可点击 */
}
/* ✅ 核心：仅当 checkbox 选中时，激活整个菜单区域 */
#menu-toggle:checked ~ #menu-wrapper {
opacity: 1;
translate: 0 0;
pointer-events: auto; /* 打开后允许点击遮罩关闭 */
}
/* 可选：添加关闭按钮样式 */
.menu-close {
position: absolute;
top: 1rem; right: 1rem;
font-size: 1.8rem;
cursor: pointer;
color: #aaa;
}
.menu-close:hover { color: #fff; }⚠️ 注意事项与最佳实践
- 不要混用 JS 显隐操作：一旦采用 :checked 方案，务必移除所有 $(".MainMenu").show()/hide() 类 JS 逻辑，否则必然冲突；
- iOS Safari 兼容性：优先使用 100dvh 替代 100vh，避免地址栏收起时视口高度变化导致菜单截断；
- 可访问性增强：为 <label> 添加 aria-expanded 属性（可通过少量 JS 同步），或使用 <button> + aria-controls 组合提升屏幕阅读器支持；
- 动画性能：translate 和 opacity 属于 GPU 加速属性，比 left/right 或 display 切换更流畅；
- 移动端点击穿透：pointer-events: none 在遮罩关闭状态下启用，可防止误触背景内容；开启后设为 auto，保证点击遮罩任意位置均可关闭菜单（符合用户直觉）。
此方案简洁、可靠、无依赖，一次点击即可精准控制菜单开关状态，从根本上解决双击异常问题，并显著提升页面性能与可维护性。
立即学习“前端免费学习笔记（深入）”；
