Close Menu With a Click on body with event listener & parentnode

Question

I want to close the re-sized menu when one clicks anywhere on the page. I've searched various stack overflow answers but haven't found one that does not interfere with the menu code itself, my menu...

jQuery(document).ready(function($) {
  //open-close submenu on mobile
  $('.cd-main-nav').on('click', function(event) {
    if ($(event.target).is('.cd-main-nav'))
      $(this).children('ul').toggleClass('is-visible0');
  });
  //i have tried adding this but hasn't worked
  $('html').click(function() {
    if ($('.cd-main-nav').children('ul').hasClass('is-visible0')) $(this).children('ul').toggleClass('is-visible0');

  });
});

`$(document).on('click', function(){//YOUR_CODE})` and use `stoppropagation` on _resized_ menu.. — Rayon, Mar 10 '16 at 12:46

John · Answer 1 · 2016-03-17T10:53:36.587

1

$('html').click(function() {
     //Hide the menus if visible
});

Include this code as it detects click anywhere on the html page also to ensure the html doesnt fire when you click the element you intend to

$('.cd-main-nav').on('click', function(event) {
event.stopPropagation();
// rest of your code here
});

edited Mar 17 '16 at 10:53

answered Mar 10 '16 at 14:15

John

114
10

thanks but not working, tried.. `$('html').click(function() { if($('.cd-main-nav').children('ul').hasClass('is-visible0')) $(this).children('ul').toggleClass('is-visible0'); });` – Max Njoroge Mar 10 '16 at 15:00
what error are you getting in your browser console? – John Mar 11 '16 at 14:56
no error just not working – Max Njoroge Mar 11 '16 at 16:01
If no error have you tried putting the code outside `jQuery(document).ready(function($) {});` – John Mar 14 '16 at 15:13
yeah i have still nothing – Max Njoroge Mar 17 '16 at 08:01
can you give your full code? html and js – John Mar 17 '16 at 10:49
i posted it here [click question](http://stackoverflow.com/questions/35968698/close-menu-onbody-click-and-animate-body/35968837#35968837) – Max Njoroge Mar 17 '16 at 16:14

Close Menu With a Click on body with event listener & parentnode

1 Answers1