javascript - 单击窗口关闭 Canvas 外菜单

Question

我制作了这个“滑出式”菜单:SASS Slide-out Menu .
没关系，但我希望当菜单滑动时，在窗口上单击菜单返回(删除类“nav-open”)。
我在 codepen 演示中试过这个，但它不起作用:

window.on("click", function(e) {
    if(wrapper.hasClass("nav-open") && e.target != nav && e.target.parent() != nav) {
        wrapper.removeClass("nav-open");
    }
});

Answer 1

你很接近!我认为您的代码笔示例需要将关闭逻辑 block 调整为如下所示:

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

给你的一些提示:

1. 使用 $(window).on 而不是 window.on
2. e.target 是一个 DOM 元素，所以你需要像 $(e.target) 一样用 jQuery 包装它
3. 您可以比较 DOM 元素，但不能比较 jQuery 对象，因此您可以使用 hasClass 代替
4. 我添加了一个检查以忽略对切换本身的点击

具有工作代码的 fork 代码笔:http://codepen.io/anon/pen/mzAru