如何通过单击画布内的窗口关闭画布外菜单？

Question

这是我的密码笔http://codepen.io/anon/pen/GZWPrj

我知道它已经被回答了好几次，但是我很难将它翻译成我的代码。

所以我有第二个画布外菜单，它按预期工作。

我要添加的一件事是能够关闭此菜单，方法是单击画布外菜单之外的任意位置 - 因此单击画布内部。

我找到了一个很好的工作示例，例如

$(window).on("click", function(e) {
    if (
      $(".wrapper").hasClass("nav-open") && 
      !$(e.target).parents(".side-nav").hasClass("side-nav") && 
      !$(e.target).hasClass("toggle")
    ) {
        $(".wrapper").removeClass("nav-open");
      }
  });

这里是Close off-canvas menu on window click，但我太笨了，不知道如何在我的代码版本中实现它。

Answer 1

您的 html 结构与链接示例不同。以下是一些适用于您的示例的代码：

$(window).on("click", function(e) {
  if (!$(e.target).hasClass('menu-link') && !$(e.target).closest('.nav-stacked').hasClass('active')) {
    //Revert the menu
    $('#menu').removeClass('active');
    //Revert the main content
    $('.container').removeClass('active');
  }
});

Updated Codepen