Question

这是我的codepen 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

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

1 个答案: