Главная > Javascript > jquery – скрыть блок при клике вне него

jquery – скрыть блок при клике вне него

Скрываем блок catalog_filter_item_multi_values при клике вне него. Также при открытии одного из блоков скрываем остальные. При повторном нажатии скрываем активный. При убирании мыши из области активного блока скрывать его.

$(document).click(function(event){
	if($(event.target).closest(".catalog_filter_item_multi_values").length||$(event.target).closest(".catalog_filter_item_multi_title").length)return;
	$(".catalog_filter_item_multi_values").fadeOut("slow");
	event.stopPropagation();
});
$('.catalog_filter_item_multi').hover(function(){
},function(){
	$(".catalog_filter_item_multi_values").fadeOut("slow");
});
$('.catalog_filter_item_multi_title').click(function(){
	$('.catalog_filter_item_multi_values').not($(this).next()).hide();
	$(this).next('.catalog_filter_item_multi_values').slideToggle();
});
<div class="catalog_filter_items_multi">
	<div class="catalog_filter_item_multi">
		<div class="catalog_filter_item_multi_title">Цвет</div>
		<div class="catalog_filter_item_multi_values">
			<label>бежевый <input type="checkbox" name="color[]" value="20"/><span></span></label>
			<label>белый <input type="checkbox" name="color[]" value="7"/><span></span></label>
			<label>черный <input type="checkbox" name="color[]" value="5"/><span></span></label>
		</div>
	</div>
	<div class="catalog_filter_item_multi">
		<div class="catalog_filter_item_multi_title">Материал</div>
		<div class="catalog_filter_item_multi_values">
			<label>дерево <input type="checkbox" name="mat[]" value="13"/><span></span></label>
			<label>искусственная кожа <input type="checkbox" name="mat[]" value="3"/><span></span></label>
		</div>
	</div>
	<div class="catalog_filter_item_multi">
		<div class="catalog_filter_item_multi_title">Брэнд</div>
		<div class="catalog_filter_item_multi_values">
			<label>707 <input type="checkbox" name="brand[]" value="17218"/><span></span></label>
			<label>Avenue <input type="checkbox" name="brand[]" value="17210"/><span></span></label>
		</div>
	</div>
</div>
Categories: Javascript Tags:
  1. Пока что нет комментариев.
Похожие публикации