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

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");
      }
  });

这里在窗口单击时关闭画布菜单，但我太笨了，无法弄清楚如何将它实现到我的代码版本。

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');
  }
});

更新代码笔