单击某个链接后关闭汉堡菜单

Question

我有一些用 html 和 CSS 制作的汉堡菜单，里面有一些链接。这很好用。但是，当我单击某个链接时，菜单不会关闭。我尝试了一些 JavaScript 示例，但没有成功。

我真的不擅长 JavaScript，需要帮助。关键是当用户单击任何链接时，我需要关闭菜单。谢谢！

<div class="menu-wrap">
  <input type="checkbox" class="toggler" />
  <div class="hamburger"><div></div></div>
  <div class="menu">
    <div>
      <img class="logo" src="assets/logo_white.svg" />
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#cards">SERVICES</a></li>
          <li><a href="#">ABOUT US</a></li>
          <li><a href="#">CONTACT US</a></li>
        </ul>
        <div class="social">
          <ul>
            <li>
              <a href="#"><i class="fab fa-facebook-f"></i></a>
            </li>
            <li>
              <a href="#"><i class="fab fa-twitter"></i></a>
            </li>
            <li>
              <a href="#"><i class="fab fa-instagram"></i></a>
            </li>
            <li>
              <a href="#"><i class="fab fa-linkedin-in"></i></a>
            </li>
          </ul>
        </div>
      </div>
  </div>
</div>

Answer 1

所以我假设您有一个没有页面重新加载的单页应用程序。每次用户单击任何链接时，您都可以关闭侧边栏。如果您使用的是 jQuery：

$(document).ready(function(){
    $("a").click(function(){
        $(".menu").hide(); 
    }); 
}); 

或者如果你想使用原版 JS：

var els = document.querySelectorAll('a');

for( var i=els.length; i--; ) {
  els[i].addEventListener( 'click', function(){
     // close your menu here
     document.getElementById('menu').style.display = 'none';
  );
}

如果您已经在使用 jQuery，请坚持使用它。如果没有，请选择原版。