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

Question

我想在我的 project/website 中实现 https://codepen.io/brenden/pen/VLjKMQ/ 这个菜单，但我无法在单击任何 link 后关闭菜单，甚至无法将其导航到我想要的部分（我的单页网站）。

<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;
  }
});

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

How to close a Full Screen menu when clicked on any of the links inside the menu?

html

javascript

css

jquery

less