单击菜单内的任何链接时如何关闭全屏菜单？

Question

我想在我的项目/网站中实现https://codepen.io/brenden/pen/VLjKMQ/这个菜单，但是单击任何链接甚至导航到我想要的部分（一页网站）后，我都无法关闭菜单

<h1>Your Content</h1>
<div class="outer-menu">
  <input class="checkbox-toggle" type="checkbox" />
  <div class="hamburger">
    <div></div>
  </div>
  <div class="menu">
    <div>
      <div>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

// bind a click listener to the entire menu
document.querySelector('.menu').addEventListener('click', function(e){
  // check to see if the element clicked was a link
  if (e.target.tagName === 'A') {
    // set the checkbox to checked false
    document.querySelector('.checkbox-toggle').checked = false;
  }
});