Как произвести закрытие меню при клике вне, а так же при клике по кнопке?

Question

[faleaksey]

Всем привет! имеется следующее: компонент меню и кнопка... у них не имеется родительской обёртки , так как они находятся в разных областях... как реализовать так, чтобы при клике на кнопку оно открывалось и закрывалось, а так же закрывалось при клике вне кнопки и самого меню...

$(document).mouseup(function (e) {
                if (div.has(e.target).length === 0) {
                    div.removeClass('open');
                }
            });

код выше удаляет класс при клике вне блока, но проблема в том что при клике по кнопке он так же удаляет но при этом и добовляет класс, т.к. на нём висит событие клика с добовлением класса.... вариант объединить их под одну обёртку не вариант!

Answer 1

[faleaksey]

Ответ нашёл в этой реализации:

if($('.minicart-side').length){
				$('.minicart-link').on('click',function(e){
					e.preventDefault();
					e.stopPropagation();
					
					if($('.minicart-side').hasClass("open")){
						$('.minicart-side').removeClass("open");
					}else{
						$('.minicart-side').addClass("open");
					}
					
				});
				$('body').on('click', $.proxy( function(e){
					var element = $(e.target);
					if($('.minicart-side').length && $('.minicart-side').hasClass('open')){
						if(!element.is('.minicart-side') && element.parents('.minicart-side').length === 0 )
						{
							$('.minicart-side').removeClass('open');
						}
					}
				}, this) );
				
			}

Answer 2

[Enrage]

Если я правильно понял:

$(document).on('click', function(e) {
    if ($(e.target).closest('.open').length) return;
    div.removeClass('open');
});

div.on('click', function() {
    div.toggleClass('open');
});