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

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

Your html structure is different to the linked example. Below is some code that will work for your example:

$(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