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

Question

[GaserV]

Привет всем! Подскажите, как закрыть дропдаун, если кликнул в любом месте, кроме него?

Comments

[Ksider]

какой еще дропдаун, то?

[GaserV]

Ksider: ну самый обкновенный) Например активный дропдаун будет $('.dropdown.active') при клике в любом месте кроме него нужно убрать класс active скажем

[Ksider]

GaserV: наберите в песочниуе, что нужно, чтоб без телепатии было

$(document).on("click", "body", function(event){
$('.dropdown').removeClass('active');
});

[GaserV]

Ksider: открывается простым способом:

$('[data-dropdown]').on('click', (e) => {
		let dropdown = $(e.currentTarget).data('dropdown');

		$(`#${dropdown}`).addClass('active');
	})

Ваш вариант не работает, поскольку класс добавляется и сразу удаляется, т.е. дропдаун даже не успевает открыться как уже закрылся

[Ksider]

GaserV: ну и создайте в момент открытия прозрачный блок под дропдауном во весь экран, и вешайте клик на него.

[GaserV]

Ksider: нет. это не валидно. Я как-то очень давно реализовывал но сейчас уже и не вспомню. Если найду на черновиках где - покажу)

Answer 1

[Ksider]

$('[data-dropdown]').on('click', (e) => {
    let dropdown = $(e.currentTarget).data('dropdown');
$("body").append('<div id="body"></div>');
    $(`#${dropdown}`).addClass('active');
  })

$(document).on("click", "#body", function(event){
    $("#body").remove();
   $('.dropdown').removeClass('active');
});

Comments

[GaserV]

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

Answer 2

[GaserV]

Вообщем вот решение. Возможно пригодится кому.

$('[data-dropdown]').on('click', (e) => {
		let dropdown = $(e.currentTarget).data('dropdown');

		$(`#${dropdown}`).addClass('active');
	})

	$('body').on('click', (e) => {

	if ( $(e.target).closest('.dropdown, [data-dropdown]').length == 0 ) {
		$('.dropdown').removeClass('active')
	}
	
	})

Answer 3

[Emil Revencu]

Добавьте атрибут tabindex="0" и закройте dropdown в event ONBLUR