清除切換狀態

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/