Javascript 在选择li项目后尝试使导航切换到关闭状态

我想菜单自动动画关闭后，菜单中的一个项目已被点击。我希望用户仍然可以选择再次切换菜单。我使用

$（“#overlay”）.toggleClass（）成功地使项目在单击项目后消失但现在用户不再有再次单击菜单的选项。我试着在谷歌上搜索，但找不到明确的答案。我是JavaScript新手，有人能告诉我正确的方向吗

链接到示例

HTML

你就在不远处。。。在click处理程序中只有几个错误放置的调用

试试这个：

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

Forked
您也可以通过这种方式使事件处理程序更加清晰：

$('#toggle').click(function() {
// Adding classes, waiting for a click
$(this).addClass('active');
$('#overlay').addClass('open');
$("nav li").click(function () {
    // Clicked! Removing classes
    $('#overlay').removeClass('open');
    $('#toggle').removeClass('active');
});

}))；
我个人通常在执行这种特定操作时使用addClass和removeClass函数。这有助于避免可能需要很长时间才能看到的小错误。：）
 比我快6秒：p@mcon-如果你能找到一条“赛道”，我会再和你比赛一次：-）啊，我明白了！谢谢你@AmitAlso感谢你的帮助@mcon你们是我的英雄！！奖金问题。。我如何进入页面以设置该部分的动画？链接幻灯片/幻灯片向上或向下到该部分？您的示例对我来说似乎很好。我可以通过点击按钮打开和关闭菜单，菜单中的每个按钮都会改变菜单外的内容。
$('#toggle').click(function() {
  $(this).toggleClass('active');
  $('#overlay').toggleClass('open');
});
$("nav li").click(function() {
  $('#overlay').toggleClass('open');
  $('#toggle').toggleClass('active');
});

$('#toggle').click(function() {
// Adding classes, waiting for a click
$(this).addClass('active');
$('#overlay').addClass('open');
$("nav li").click(function () {
    // Clicked! Removing classes
    $('#overlay').removeClass('open');
    $('#toggle').removeClass('active');
});