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/

清除切换状态

2 个答案: