点击事件后关闭汉堡包菜单

Question

我有一个汉堡包菜单几乎完成只有1个错误/问题,我无法弄清楚.我的导航链接到主页上的不同区域.因此,在主页上,用户可以单击导航链接,该链接将立即将其下移到页面上的所需位置.

我的问题是因为没有加载所以一旦用户点击导航链接他们被带到该位置但下拉菜单将不会关闭.我尝试在JS中添加.hide,它隐藏了点击链接的下拉列表,但这创建了我的新问题.

用户单击其中一个导航链接后,它会隐藏菜单,但再次单击菜单图标时,菜单根本不会打开.在开发工具中,我看到在点击其中一个导航链接时,它被赋予了显示风格:无,所以我觉得问题可能就在那里.感谢您的帮助,如果需要任何其他信息,请告诉我们!

HTML:

     <nav class="navbar navbar-light navbar-fixed-top">
     <div class="wrapping container-fluid">
        <div class="hamburger">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
        </div>
      <ul class="nav navbar-nav float-sm-right mr-0 menu">
        <li class="nav-item">
          <span class="sr-only"></span>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#schedule">Schedule<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#workshops">Workshops</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#locations">Location</a>
        </li>
        <li class="nav-item">
          <a class="nav-link last-link" href="#register">Register</a>
        </li>
      </ul>
      <a class="navbar-brand" href="#home"><img class="logo" src="img/Logo.png" alt=""></a>
    </div>
  </nav>

这个菜单的CSS:

.menu{
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.open{
  height: 295px;
}

.hamburger {
  cursor: pointer;
  padding: 15px 10px 15px 0;
  display: block;
  float: right;
  margin-top: 15px;
}

JS:

$('.hamburger').on('click', function () {

$('.menu').toggleClass('open');

});

$( '.menu a' ).on("click", function(){
$('.menu').hide();
});

Answer 1

如果您打算使用它.toggleClass('open')来打开菜单,也可以使用它来关闭菜单.

一般情况下,虽然,你会希望使用.addClass()和.removeClass()替代:

$('.hamburger').on('click', function () {
  $('.menu').addClass('open');
});

$( '.menu a' ).on("click", function(){
  $('.menu').removeClass('open');
});