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>
