Как запретить выделение нескольких компонентов одновременно?

Question

[Саша]

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

код

Спасибо!

Answer 1

[Константин Б.]

siblings() - находит одинаковые с текущим элеиентом

$('.trigger').click(function(){
	$(this).parents('.parent')
				 .toggleClass('active')
         .siblings()
         .removeClass('active');
});

Comments

[Саша]

Kostik_1993 а если выделить не одноуровневые, а по всему документу?

[Константин Б.]

Саша: тогда нужно присвоить

// На выбор два варианта в вашем случае
// Первый такой
$(document).find('.parent').removeClass('active');
// Второй
$(document).find('.trigger').parents('.parent').removeClass('active');

$(this).parents('.parent')
         .toggleClass('active');

[Саша]

Kostik_1993:
получилось, спасибо за наводку!
итоговый код вышел таким

$('.trigger').click(function(){
	var parent = $(this).parents('.parent');
	var parentActive = 'active';
	if(parent.hasClass(parentActive)){
		$(this).parents('.parent').toggleClass(parentActive);
	}
	else{
		$('.' + parentActive).removeClass(parentActive);
		$(this).parents('.parent').toggleClass(parentActive);
	}
});

$(document).click(function(event){
	if(!$(event.target).is('.active *')){
		$('.active').removeClass('active');
	}
});