移动端点击菜单项后菜单及遮罩无法关闭的问题求助

阿华AIGC实验室

2026-5-13

修复移动菜单点击菜单项后无法关闭的问题

我帮你排查了一下，问题的核心在于当前菜单的显示/隐藏完全依赖<input type="checkbox" id="overlay-input">的checked状态，但点击菜单项时，并没有触发这个复选框的状态切换，所以菜单和遮罩会一直保持显示状态。

下面给你两种解决方案，你可以根据需求选择：

方案一：JavaScript 点击事件（推荐，兼容性好）

直接给每个菜单项的链接添加点击事件，手动将复选框的checked状态设为false，这样点击菜单项时就会触发菜单关闭：

修改后的HTML代码：

<body>
<input type="checkbox" id="overlay-input" />
<label for="overlay-input" id="overlay-button"><span></span></label>
<div id="overlay" >
<center>
<img src="/wp-content/uploads/2019/06/logo-copy.png" class="logo-up" alt="Trulli" width="250" height=auto></center>
<ul>
<li><a href="#home" onclick="document.getElementById('overlay-input').checked = false;">Home</a></li>
<li><a href="#" onclick="document.getElementById('overlay-input').checked = false;">About</a></li>
<li><a href="#" onclick="document.getElementById('overlay-input').checked = false;">Contact</a></li>
</ul>
</div>
</body>

方案二：纯CSS 标签包裹（无需JS）

把每个菜单项包裹在<label>标签里，利用<label>关联复选框的特性，点击<label>时会自动切换复选框的状态：

修改后的HTML代码：

<body>
<input type="checkbox" id="overlay-input" />
<label for="overlay-input" id="overlay-button"><span></span></label>
<div id="overlay" >
<center>
<img src="/wp-content/uploads/2019/06/logo-copy.png" class="logo-up" alt="Trulli" width="250" height=auto></center>
<ul>
<li><label for="overlay-input"><a href="#home">Home</a></label></li>
<li><label for="overlay-input"><a href="#">About</a></label></li>
<li><label for="overlay-input"><a href="#">Contact</a></label></li>
</ul>
</div>
</body>

另外，我注意到你的CSS里有一行无效代码：#overlay ul li a:click，CSS中没有:click伪类，应该改成:active（点击时的状态），不过这行代码不影响菜单关闭的问题，只是顺便提一下。

内容的提问来源于stack exchange，提问作者Saigonns