清除切换状态

Question

我有一个表单选择替换，它使用jQuery在用户单击链接时在UL列表中显示选项。点击选项可以更改隐藏的表单值并隐藏列表。一切工作正常，但如果用户点击列表或图像以外的地方，我想列表隐藏。它看起来像我需要清除切换状态并隐藏列表，但我一直无法做到这一点。 （由delicious.com多选项的搜索的启发。）

$('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

您可以使用事件冒泡做你想做的，是这样的：

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

当click气泡document（正常的泡沫行为），我们隐藏ul.left。当您单击内是<ul>，你可以防止泡沫从使用event.stopPropagation()发生...所以点击以外的任何地方的<ul>使其隐藏，任何地方里面有没有额外的效果:)

Answer 2

一个插件为您设计用例：

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