javascript - 选择 li 项目后尝试让 nav 切换关闭

Question

我希望菜单在单击菜单中的某个项目后自动关闭。我希望用户仍然可以选择再次切换菜单。我设法使用 $('#overlay').toggleClass(); 单击某个项目后使该项目消失，但现在用户不再可以选择再次单击菜单。我尝试过谷歌搜索，但找不到明确的答案。我是 JavaScript 新手，有人可以给我指出正确的方向吗？

链接到示例 http://codepen.io/anon/pen/KpRmgE

HTML

<div class="button_container" id="toggle">
  <span class="top"></span>
  <span class="middle"></span>
  <span class="bottom"></span>
</div>

<div class="overlay" id="overlay">
  <nav class="overlay-menu">
    <ul>
      <li ><a href="#home">Home</a></li>
      <li><a href="#portfolio">Port</a></li>
      <li><a href="#about">Work</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

<section id="home">
  <p>First</p>
</section>
<section id="portfolio">
  <p>Second</p>
</section>
<section id="about">
  <p>Third</p>
</section>
<section id="contact">
  <p>Fourth</p>
</section>

JavaScript

$('#toggle').click(function() {
    $(this).toggleClass('active');
    $('#overlay').toggleClass('open');
    $("nav li").click(function () {
        $('#overlay').toggleClass();
    });
});

Answer 1

您的情况并不遥远...只是在点击处理程序中进行了一些错误放置的调用。

试试这个:

$('#toggle').click(function() {
  $(this).toggleClass('active');
  $('#overlay').toggleClass('open');
});
$("nav li").click(function() {
  $('#overlay').toggleClass('open');
  $('#toggle').toggleClass('active');
});

fork codepen