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，请坚持使用它。如果没有，请选择香草版本。

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

1 个答案: