How to close off-canvas menu by clicking on window inside canvas?

Question

here's my codepen http://codepen.io/anon/pen/GZWPrj

I know it's been answered few times, but it's too difficult for me to translate it to my code.

So I have a second off-canvas menu which is working as intended.

One thing I want to add is the ability to close this menu, by clicking anywhere outside the off-canvas menu - so clicking inside the canvas.

I found a good working example like

$(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");
      }
  });

here Close off-canvas menu on window click but I'm too dumb to figure out how to implement it to my version of code.

Answer 1

Your html structure is different to the linked example. Below is some code that will work for your example:

$(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