如何通过单击 canvas 内的 window 关闭关闭-canvas 菜单？

Question

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

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

所以我有第二个关闭-canvas 菜单，它按预期工作。

我想添加的一件事是关闭此菜单的功能，方法是单击关闭-canvas 菜单之外的任意位置 - 因此单击 canvas.

内部

我找到了一个很好的例子，比如

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

如何通过单击 canvas 内的 window 关闭关闭-canvas 菜单？

How to close off-canvas menu by clicking on window inside canvas?

javascript

css

jquery

twitter-bootstrap

off-canvas-menu