Как сделать так чтобы меню-гамбургер скрывалось при клике на любую область, кроме самого меню (скинул кусок js кода с комментариями)?

Question

[Kasum01]

// Menu opener hamburger

    $('.menu-open').click(function() { // При клике на button
        $('.menu-collapse').toggleClass('d-none').css('order', '1'); // Окрывается меню-гамбургер, которое открывается и скрывается при клике на баттон
        $('.menu').toggleClass('menu-opened'); // Следом этому же меню присваевается класс menu-opened, которому заданы стили для оформления
    });

    // Хочу чтобы меню скрывалось при клике на любую область кроме меню
    // Извините я новичок, и не очень объяснил возможно<code><code lang="javascript">

</code>

Answer 1

[Destell]

$('body').on('click', function(event){
		if (!$(event.target).closest('.menu').length) {
			$('.menu').removeClass('menu-opened')
		}
	});

Comments

[Kasum01]

$(document).click(function(e) {
          if($(e.target).closest('.menu-opened').length ||
              $(e.target).closest('.menu-open').length) return;
          $('.menu-collapse').addClass('d-none');
          $('.menu').removeClass('menu-opened');
          e.stopPropagation();
      });

Answer 2

[BATPYIIIKOB]

$('body').not('.menu').click(function() { 
        $('.menu').toggleClass('menu-opened'); // Следом этому же меню присваевается класс menu-opened, которому заданы стили для оформления
    });

Comments

[Kasum01]

Спасибо большое. Но я хотел чтобы просто скрывалось меню гамбургер при клике на бади, и не появлялось снова при клике на бади. С вашим кодом у меня при клике на бади после выхода гамбургера просто выходит/заходит меню без стилей. Как это сделать (чтобы было как я хотел)?

[BATPYIIIKOB]

$('body').not('.menu').click(function() { 
        $('.menu').removeClass('menu-opened');
    });

[Kasum01]

Спасибо большое, но у меня не исчезает меню. Вот наставник отправил решение

$(document).click(function(e) {
          if($(e.target).closest('.menu-opened').length ||
              $(e.target).closest('.menu-open').length) return;
          $('.menu-collapse').addClass('d-none');
          $('.menu').removeClass('menu-opened');
          e.stopPropagation();
      });