Jquery - vérifier pour les clics en dehors d'une zone Sélectionner

Question

Je recréée une boîte de sélection et sa fonction de menu déroulant en utilisant ceci:

$(".selectBox").click(function(e) { 
    if (!$("#dropDown").css("display") || $("#dropDown").css("display") == "none") 
     $("#dropDown").slideDown(); 
    else 
     $("#dropDown").slideUp(); 
    e.preventDefault(); 
}); 

Le seul problème est que si vous cliquez en dehors de la boîte, le menu déroulant reste. Je voudrais à mimer un menu déroulant régulier et à proximité lorsque vous cliquez en dehors, donc je pensais que je pouvais faire un « corps », cliquez sur:

$('body').click(function(){ 
    if ($("#dropdown").css("display") || $("#dropdown").css("display") != "none") 
     $("#dropdown").slideUp(); 
}); 

Mais maintenant, lorsque vous cliquez sur la zone Sélectionner, dans la liste déroulante glisse vers le bas et à droite. Des idées de ce que je fais mal? Merci beaucoup à l'avance ...

Answer 1

Vous devez également arrêter un clic de à l'intérieur la #dropdown de bulles remonter à body, comme ceci:

$(".selectBox, #dropdown").click(function(e) { 
    e.stopPropagation(); 
}); 

Nous utilisons event.stopPropagation() il arrête la cliquez à partir de bouillir, provoquant le .slideUp(). Aussi vos 2 autres gestionnaires d'événements peuvent être simplifiés avec :visible ou .slideToggle(), comme ce général:

$(".selectBox").click(function(e) { 
    $("#dropDown").slideToggle(); 
    return false;     //also prevents bubbling 
}); 
$("#dropdown").click(function(e) { 
    e.stopPropagation(); 
}); 
$(document).click(function(){ 
    $("#dropdown:visible").slideUp(); 
}); 

Answer 2

Puisque vous configurez un gestionnaire d'événements qui attire chaque clic, vous n'avez pas besoin d'un autre sur un enfant.

$(document).click(function(e) { 
    if ($(e.target).closest('.selectBox').length) { 
     $('#dropdown').slideToggle(); 
     return false; 
    } else { 
     $('#dropdown:visible').slideUp(); 
    } 
});