Как близко всплывающее окно щелчком на фоне

Question

у меня есть простой выпадающий список, и мне нужно, чтобы скрыть (FadeOut) его, нажав на документ

это мой JQuery код:

var expandCheckbox = $('.filterShow'), 
    formCheckbox = $('.checkboxWrap'); 
expandCheckbox.click(function(e) { 
    e.preventDefault(); 

    if ($(this).hasClass('active')) { 
     $(this).removeClass('active'); 
     $(formCheckbox).fadeOut(200); 
    } else { 
     $(this).addClass('active'); 
     $(formCheckbox).fadeIn(100); 
    } 
}); 

$('body').not('.filterShow, .checkboxWrap').click(function() { 
    $(formCheckbox).fadeOut(100); 
}); 

SEE JSFIDDLE

Answer 1

Удалите «e.preventDefault», который здесь не используется, добавьте «return false», чтобы предотвратить распространение события в его родительский элемент, вместо «bod» используйте «document» y "в качестве селектора для затухания выпадающего списка при нажатии в любом месте документа.

$(document).ready(function(){ 
    expandCheckbox = $('.filterShow'), 
    formCheckbox = $('.checkboxWrap'); 
    expandCheckbox.click(function (e) { 

     if ($(this).hasClass('active')) { 
      $(this).removeClass('active'); 
      formCheckbox.fadeOut(200); 
     } else { 
      $(this).addClass('active'); 
      formCheckbox.fadeIn(100); 
     } 
     return false; 
    }); 

    $(document).click(function (e) { 
     if (expandCheckbox.hasClass('active')) { 
      expandCheckbox.removeClass('active'); 
      formCheckbox.fadeOut(200); 
     } 
     return false; 
    }); 

    formCheckbox.find('input:checkbox').click(function (e) { 
     e.stopPropagation(); 
    }); 
});