Clever Geek Handbook

Close canvas menu in click window

I made this slide-out menu: SASS Slide-out Menu .
This is ok, but I want when the menu slides down, in the window, click the menu, go back (remove the "nav-open" class).
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");
    }
});
+3


source to share


1 answer


You're close! I think your codepen example needs a tight logical block setup 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");
      }
  });

Some tips for you:



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

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

+2


source






More articles:


All Articles