Javascript 汉堡包菜单工作，但在我点击菜单链接后，它消失了

我遇到的问题是我的汉堡包菜单。我有一个一页的站点，所以导航中的链接会转到页面中的某个部分。当我点击汉堡菜单时，它会打开我的导航，当我点击任何链接时，导航会转到我想要的正确位置并关闭，但汉堡菜单会一起消失。如何让菜单在点击链接时消失，但让汉堡菜单恢复到原来的状态并再次点击？这是我个人的投资组合项目，我对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>

以下是我的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();

  });

});

---

实际上，jQuery的

.hide（）

方法将目标元素的显示设置为“无”

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

您需要做的是切换

菜单部分

元素上的“on”类，并将其他所有内容切换回初始状态：

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

---

啊，这很有道理，就像一个符咒！非常感谢。

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