在窗口单击关闭画布菜单 [英] Close off-canvas menu on window click

问题描述

我制作了这个滑出菜单： SASS滑出式菜单。

没关系，但我希望当菜单滑动时，在窗口上单击菜单返回（删除类nav-open）。

我试过这个codepen演示，但它不起作用：

I made this "slide-out" menu: SASS Slide-out Menu.
It's ok, but I want that when the menu have slid, on window click the menu returns back(remove the class "nav-open").
I tried this on the codepen demo, but it doesn't work:

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

推荐答案

你很接近！我认为你的codepen示例需要关闭逻辑块调整如下：

You're close! I think your codepen example needs the close logic block tweaking to look like this:

  $(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. 使用$（窗口）.on not window.on


2. e.target是一个DOM元素，所以你需要将它包装在jQuery中，如$（e.target ）


3. 你可以比较DOM元素，但不能比较jQuery对象，所以你可以使用hasClass


4. 我添加了一个检查来忽略点击切换本身

1. Use $(window).on not window.on
2. e.target is a DOM element, so you need to wrap it in jQuery like $(e.target)
3. You can compare DOM elements, but not jQuery objects, so you can use hasClass instead
4. I added a check to ignore a click on the toggle itself

带有工作代码的forked codepen： http://codepen.io/anon/pen/mzAru

Forked codepen with working code: http://codepen.io/anon/pen/mzAru

这篇关于在窗口单击关闭画布菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！