État de bascule d'effacement

Question

J'ai un formulaire de remplacement de sélection qui utilise jQuery pour afficher les options dans une liste UL lorsqu'un utilisateur clique sur un lien. Cliquer sur une option modifie une valeur de masque cachée et cache la liste. Tout fonctionne bien, mais si l'utilisateur clique quelque part en dehors de la liste ou de l'image que je voudrais cacher. Il semble que je doive effacer l'état de bascule et masquer la liste, mais je n'ai pas été capable de le faire. (Inspirée par delicious.com recherche multi-option.)

$('ul.left').hide(); 

$('ul.downarrow li a').click(function(){ 
    $('ul.left').toggle(); 
}); 

$('ul.left li a').click(function() { 
    $('ul.left').hide(); 
    $('#sitesearchquery').val($(this).attr('name'));   
}); 

<ul class="downarrow"> 
    <li><a style="cursor:pointer; display:inline-block; width:20px; height:20px; background: url(images/down_arrow.gif);"></a> 
    <ul class="left"> 
     <li><a href="#" name="mysite">My Site</a></li> 
     <li><a href="#" name="othersite">Other Site</a></li> 
    </ul> 
    </li> 
</ul> 
... 
<input type="hidden" name="sitesearch" id="sitesearchquery" value="mysite" /> 

Answer 1

Vous pouvez utiliser l'événement bouillonnant pour faire ce que vous voulez, comme ceci:

$('ul.downarrow').click(function(e){ 
    e.stopPropagation(); //stop event from bubbling 
}); 
$(document).click(function() { 
    $('ul.left').hide(); 
}); 

Lorsqu'un click bulles document (comportement des bulles normale), nous cachons ul.left. Lorsque vous cliquez sur dans que <ul>, vous pouvez simplement éviter que la bulle de se produire à l'aide event.stopPropagation() ... donc cliquer n'importe où en dehors de la <ul> l'amène à se cacher, nulle part n'a pas d'effets à l'intérieur :) supplémentaires

Answer 2

Un plugin conçu pour votre usecase:

http://benalman.com/projects/jquery-outside-events-plugin/