点击锚点链接无法关闭全屏导航菜单的解决方法求助

你当前的全屏菜单通过id为op的checkbox的选中状态控制显隐，只需在点击锚点链接时将该checkbox的checked属性设为false即可关闭菜单，有两种常用实现方案：

方案1：纯HTML实现（零JS，改动量小） #

直接把导航内的锚点链接套在绑定了for="op"的label标签内，点击链接时会自动切换checkbox的选中状态，兼容性好：

<li>
  <label for="op">
    <a href="#anchorlink">anchorlink</a>
  </label>
</li>

所有导航内的锚点链接都按照这个格式修改即可生效。

方案2：JS实现（无需修改原有HTML，适合复杂场景） #

如果不想改动原有HTML结构，或者需要在关闭菜单时添加额外逻辑，可以加几行JS实现：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 选中所有导航内的锚点链接
  const navAnchors = document.querySelectorAll('.overlay nav a[href^="#"]');
  navAnchors.forEach(anchor => {
    anchor.addEventListener('click', () => {
      // 取消checkbox的选中状态即可关闭全屏菜单
      document.getElementById('op').checked = false;
    })
  })
})

把这段代码放到页面底部或者独立的JS文件中引入即可。

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