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

Question

[Evgeniy V.]

У сайта есть меню

<button class="menu-button">
<img src="img/menu.png" alt="Menu">
<div class="button-scale"></div>
</button>
<button class="menu-close hidden">
&#10006;
<div class="button-scale"></div>
</button>
<div class="menu" id="menu-target">
 <!-- Код внутри меню -->
</div>

Это меню по типу бургера, вспылвающее при клике на кнопку

$('.menu-button').click(function() {
	$('.menu').toggleClass('menu_active');
	$('.menu-button').toggleClass('hidden');
	$('.menu-close').toggleClass('hidden');
});
$('.menu-close').click(function() {
	$('.menu').toggleClass('menu_active');
	$('.menu-button').toggleClass('hidden');
	$('.menu-close').toggleClass('hidden');
});

Как сделать, чтобы при нажатии вне меню оно сворачивалось обратно, так как оно занимает не всю ширину дисплея?

Comments

[Kovalsky]

Было на тостере, пользуйтесь поиском.

[Антон]

Закрытие меню по клику на пустое место?

Answer 1

[Илья Хребет]

var is_menu_open = false;

$('.menu-button').click(function () {
  is_menu_open = true;
  $('.menu').toggleClass('menu_active');
  $('.menu-button').toggleClass('hidden');
  $('.menu-close').toggleClass('hidden');
});

$('.menu-close').click(function () {
  is_menu_open = false;
  $('.menu').toggleClass('menu_active');
  $('.menu-button').toggleClass('hidden');
  $('.menu-close').toggleClass('hidden');
});

$(document).mouseup(function (e) {
  if (is_menu_open) {
    var menu = $("#menu-target");
    if (!menu.is(e.target) && menu.has(e.target).length === 0) {
      $('.menu-close').click();
      is_menu_open = false;
    }
  }
});

Comments

[Evgeniy V.]

Спасибо большое