Как закрывать блок при клике за его пределами?

Question

[Cheizer]

Подскажите пожалуйста, как на jquery закрыть блок с подменю, при клике и тапе за его пределами?
Как открывать по клику на пункт сделал, но если проверяю на событие target при клике на документ, начинаются проблемы, перестает работать открывание по клику на пункте меню. Как правильно это реализовать? Как закрыть блок с подменю, при клике и тапе за его пределами?

Answer 1

[Spartak (Web-StyleStudio)]

Скрыть элемент при клике за его пределами

Comments

[Cheizer]

так и сделал, но при этом не закрывается при клике на пункт меню. А это не правильно.

[Spartak (Web-StyleStudio)]

Роман Кузнецов,

$(".dropdown > a").click(function (event) {
	event.preventDefault();
	$(this).parent().toggleClass("drop");	
	return false;
});

$(document).click(function (e) {
	if (!$(e.target).closest(".dropdown-block").length) {
		$(".dropdown-block").parent().removeClass("drop");
	}
});

[Cheizer]

Spartak (Web-StyleStudio), Спасибо!

[Spartak (Web-StyleStudio)]

Роман Кузнецов, пожалуйста

Answer 2

[profesor08]

Используй :focus-within, если элемент все фокуса, то список скрывается.

Разметка +-

<div class="menu-item" tabindex="-1">
  <div class="menu-item-toggle">Menu item</div>
  <div class="menu-item-list">
    <div class="menu-item">sub item</div>
    <div class="menu-item">sub item</div>
    <div class="menu-item">sub item</div>
    <div class="menu-item">sub item</div>
  </div>
</div>

.menu-item:not(:focus-within) .menu-item-list {
  display: none;
}

Comments

[Cheizer]

Спасибо, но только на JS, css свойство focus-within IE вообще никакой не поддерживает, даже 11.

[profesor08]

Роман Кузнецов, да пропади он пропадом этот ие. Давно забыть про него надо.

[Cheizer]

profesor08, это точно :))) но увы, не для себя верстку делаю.

[profesor08]

Роман Кузнецов, https://www.npmjs.com/package/focus-within-polyfill

[Cheizer]

profesor08, https://caniuse.com/#search=focus-within

[profesor08]

Роман Кузнецов, вон выше ссылка на полифил, берешь код и выполняешь его для ие.

[Cheizer]

profesor08, о нет, спасибо, это еще ради этого библиотеку с полифилами подключать если правильно понял, не стоит оно того.

[profesor08]

Роман Кузнецов, а лучше на каждый чих шерстить DOM? Причем всегда и в каждом браузере независимо поддерживается в нем фича или нет?

[Cheizer]

profesor08, это просто оптимальное решение для работы меню. CSS пока еще слабоват для таких манипуляций, и JS библиотека уже подключена для других вещей. И лишнее подключать ради одной задачи, не стоит я так считаю.