点击导航内部nav-link链接时如何自动关闭整个导航菜单

实现原理 #

你的导航菜单的展开/收起完全由id为navi-toggle的复选框的选中状态控制：复选框被勾选时菜单展开，取消勾选时菜单收起。只需要在点击导航内的链接/可点击元素时，自动取消该复选框的选中状态即可实现点击关闭效果。

方案1：原生JS实现（推荐，无需修改现有HTML/CSS） #

把以下代码插入到页面底部</body>标签之前，或者放到你已有的JS文件中即可：

// 获取导航开关复选框
const navToggle = document.getElementById('navi-toggle');
// 匹配导航内所有需要触发关闭的元素：跳转链接、社交图标
const navClickTargets = document.querySelectorAll('.navigation__nav a, .navigation__nav .social-links i');

// 批量绑定点击事件
navClickTargets.forEach(item => {
  item.addEventListener('click', () => {
    navToggle.checked = false;
  });
});

方案2：无JS实现（需修改HTML结构） #

如果不想引入JS，可以给导航内所有可点击元素（a标签、社交图标）外层嵌套指向navi-toggle的label标签，示例如下：

<!-- 改造前 -->
<a href="#projects" id="c">Projects</a>

<!-- 改造后 -->
<label for="navi-toggle" class="nav-close-label">
  <a href="#projects" id="c">Projects</a>
</label>

同时在SCSS中补充以下样式避免label干扰链接默认行为：

.nav-close-label {
  display: inline-block;
  padding: 0;
  margin: 0;
  pointer-events: none;
  .navigation__nav a, .navigation__nav .social-links i {
    pointer-events: auto;
  }
}

两种方案都不会影响原有链接的跳转、新标签页打开、锚点定位等默认行为。

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