点击事件后关闭汉堡菜单

Posted 2023-04-13

【中文标题】点击事件后关闭汉堡菜单

【英文标题】：Close hamburger menu after click event

【发布时间】：2017-05-29 05:20:06

【问题描述】：

我有一个几乎完整的汉堡菜单，只有 1 个我无法弄清楚的错误/问题。我的导航链接到主页上的不同区域。因此，在主页上，用户可以单击导航链接，该链接会立即将他们带到页面上所需的位置。

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

在用户单击其中一个导航链接后，它会隐藏菜单，但再次单击菜单图标时，菜单根本不会打开。在开发工具中，我看到单击其中一个导航链接后，它的样式为 display:none，所以我觉得问题可能就在那里。感谢您的帮助，如果需要任何其他信息，请告诉我！

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" ></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();
);

【问题讨论】：

把$('.menu').hide();从$( '.menu a' ).on("click", function()去掉，加上$('.menu').toggleClass('open');

【参考方案1】：

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

不过，一般来说，您会希望使用 .addClass() 和 .removeClass()：

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

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

【讨论】：

完美运行！谢谢你的帮助，你让我头疼不已。

【参考方案2】：

如果您的汉堡菜单后面有复选框，您可以简单地将其设置为未选中以关闭汉堡菜单

  function hideMenu()
  let menuOpen = document.querySelector('.toggler').checked;

  if(menuOpen = true)
    document.querySelector('.toggler').checked = false;
  
  
  window.addEventListener("scroll", hideMenu);