Как скрывать элемент, при клике вне его области и вне области его дочек?

Question

[error401]

Добрый день, граждане.

Есть боковое, мобильное, выезжающее меню. Сейчас открывается и закрывается только по клику на гамбургер, а нужно сделать, что бы меню во первых, так же могло открываться и закрываться по клику на гамбургер + что бы открытое меню закрывалось при клике (тапе) вне его области и области его дочек.

Попробовал так:

jQuery(function($){
	$(document).mouseup(function (e){ 
		var div = $("#menu-mobile-menu"); 
		if (!div.is(e.target) 
		    && div.has(e.target).length === 0) { 
			div.hide(); 
		}
	});
});

Но теперь вообще меню даже не открывается по клике на гамбурге. Соответственно не могу проверить, закрывается ли оно по клике вне зоны его области.

Буду благодарен за помощь.

Answer 1

[Максим]

Дочки-Сыночки : https://codepen.io/topicstarter/pen/gOYgOGr примерно так

Answer 2

[ettychel]

Возможно у вас должен быть какой то идентификатор о том, что сейчас меню открыто, потому как в данный момент у вас получается, что вы нажимаете на гамбургер, который попадает под условие и меню сразу закрывается
Попробуйте добавлять класс show к тегу родителя меню, а потом его проверять на наличие этого тега или же как более лучший вариант писать в .data элемента информацию типа show=true и потом проверять

jQuery(function($){
  $(document).mouseup(function (e){ 
    var div = $("#menu-mobile-menu"); 
    if (!div.is(e.target) 
        && div.has(e.target).length === 0) { 
      if (div.hasClass('show')) {
        div.hide(); 
      }
    }
  });
});