单击事件后关闭汉堡包菜单 [英] Close hamburger menu after click event

问题描述

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

我的问题是没有加载，所以一旦用户点击导航链接，他们被带到该位置，但下拉菜单不会关闭。我试图添加。隐藏到JS，它隐藏下拉链接点击链接，但创建了我的新问题。

在用户点击其中一个导航链接后，它会隐藏菜单，但再次单击菜单图标时，菜单根本无法打开。在开发工具中，我看到单击其中一个导航链接时会显示其显示样式：无，因此我认为问题可能在于此。感谢您的帮助，请让我知道是否需要其他信息！

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-linkhref =＃schedule> Schedule< span class =sr-only>（current）< / span>< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃workshops>研讨会< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃locations>位置< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-link last-linkhref =＃register>注册< / a> 
< / li> 
< / ul> 
< a class =navbar-brandhref =＃home>< img class =logosrc =img / Logo.pngalt =>< / a> 
< / div> 
< / nav> 
  

此菜单的CSS：

  .menu {
 height：0; 
 overflow：hidden; 
过渡：高度0.3s; 
} 
 
 .open {
 height：295px; 
} 
 
 .hamburger {
 cursor：pointer; 
 padding：15px 10px 15px 0; 
 display：block; 
 float：right; 
 margin-top：15px; 
 
  

JS：

<$ （'click'，function（）{

$（'。menu'）。toggleClass（'open'）p $ p> $（'。hamburger'）。 ;

}）;
$ b $（'.menu a'）.on（click，function（）{
$（'。menu'）。hide（）;
}）;


解决方案

如果您打算使用 .toggleClass（'open'）来打开菜单，并用它来关闭菜单。

一般来说，我们希望使用 .addClass（）和 .removeClass（）代替：

$（$。$ $ $ $ $''$'$'$。'$'$。$'$'$''。' '）;
}）;
$ b $（'.menu a'）.on（click，function（）{
$（'。menu'）。removeClass（'open'）;
}）;

I have a hamburger menu which is almost complete with just 1 bug/issue that I can't figure out. My nav links to different areas on the home page. So on the home page the user can click a nav link which would instantly take them down to the desired location on the page.

My issue comes as there is no loading so once the user clicks on the nav link they are brought to the location but the dropdown menu will not close. I tried adding .hide to the JS which hides the dropdown on the click of a link but that created my new issue.

After the user clicks one of the nav links it does hide the menu but upon clicking the menu icon again the menu will not open at all. In dev tools I see that upon clicking one of the nav links it is given the style of display:none so I feel that the issue might lie there. Thanks for the help and please let me know if any other information is needed!

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 for this menu:

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

解决方案

If you're going to use .toggleClass('open') to open the menu, use it for closing the menu as well.

Generally, though, you'll want to use .addClass() and .removeClass() instead:

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

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

这篇关于单击事件后关闭汉堡包菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！