javascript - 汉堡包菜单有效，但在我点击菜单链接后它消失了

Question

我遇到的问题是我的汉堡菜单。我有一个单页站点，因此导航中的链接转到页面中的特定部分。当我点击汉堡菜单时，它会打开我的导航，当我点击任何链接时，导航会转到正确的位置并关闭我想要的位置，但汉堡菜单会一起消失。如何让菜单在单击链接时消失，但让汉堡菜单恢复到原来的状态并可以再次单击？这是我的个人投资组合元素，我对 jquery 还是个新手。任何帮助将不胜感激。

这是我的 HTML:

<div class="menu-section">
<div class="menu-toggle">
<div class="one"></div>
 <div class="two"></div>
 <div class="three"></div>
</div>
<nav>
    <ul role="navigation" class="hidden">
        <li><a href="#about">About</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

这是我的 CSS:

.menu-toggle.on .one {
  -moz-transform: rotate(45deg) translate(7px, 7px);
  -ms-transform: rotate(45deg) translate(7px, 7px);
  -webkit-transform: rotate(45deg) translate(7px, 7px);
  transform: rotate(45deg) translate(7px, 7px);
}


.menu-toggle.on .two {
  opacity: 0;
}



.menu-toggle.on .three {
  -moz-transform: rotate(-45deg) translate(8px, -10px);
  -ms-transform: rotate(-45deg) translate(8px, -10px);
  -webkit-transform: rotate(-45deg) translate(8px, -10px);
  transform: rotate(-45deg) translate(8px, -10px);
}


.one,
.two,
.three {
  width: 100%;
  height: 5px;
  background: @color2;
  margin: 6px auto;
  backface-visibility: hidden;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}


nav ul {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Ubuntu', sans-serif;
  list-style: none;
  text-align: center;
  width: 100%;
 }




nav ul.hidden {
  display: none;
}



nav ul a {
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  text-decoration: none;
  color: @color2;
  font-size: 2.5em;
  line-height: 1.5;
  width: 100%;
  display: block;
  font-family: 'Ubuntu' sans-serif;

}




nav ul a:hover {
  background-color: rgba(0, 0, 0, 0.5);
  background-color: @color4;
}



.menu-section.on {
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgba(0, 0, 0, 0.75);
  position: absolute;
}

这是我的 jquery:

$(document).ready(function () {
  $('.menu-toggle').click(function (e) {
    $(this).toggleClass('on');
    $('.menu-section').toggleClass('on');
    $('nav ul').toggleClass('hidden');

     e.preventDefault();
   });


  $('nav ul a').click(function () {
    $('.menu-section').hide();

  });

});

Answer 1

实际上jQuery的.hide()方法将目标元素的显示设置为无。

$('nav ul a').click(function () {
  $('.menu-section').hide();
});

您需要做的是切换 .menu-section 元素上的“on”类，并将其他所有内容切换回初始状态:

$('nav ul a').click(function () {
  $('.menu-toggle').toggleClass('on');
  $('.menu-section').toggleClass('on');
  $('nav ul').toggleClass('hidden');
});