在窗口单击关闭canvas菜单
我做了这个“滑出”菜单: SASS滑出菜单 。
没关系,但我希望当菜单滑动时,在窗口上单击菜单返回(删除类“nav-open”)。
我在codepen演示中试过这个,但它不起作用:
window.on("click", function(e) { if(wrapper.hasClass("nav-open") && e.target != nav && e.target.parent() != nav) { wrapper.removeClass("nav-open"); } });
你很亲密! 我认为你的codepen示例需要关闭逻辑块调整,如下所示:
$(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"); } });
一些提示:
- 使用$(window).on not window.on
- e.target是一个DOM元素,所以你需要将其包装在jQuery中,如$(e.target)
- 您可以比较DOM元素,但不能比较jQuery对象,因此您可以使用hasClass
- 我添加了一个检查以忽略切换本身的单击
forked codepen与工作代码: http ://codepen.io/anon/pen/mzAru