jquery - 单击外部 > 隐藏()

Question

我有这个 jquery 代码:

$(document).ready(function(){
//global vars
var searchBoxes = $(".box");
var searchBox = $(".box");
var searchBoxDefault = "Search...";

searchBoxes.focus(function(e){
    $(this).addClass("active");
    $('#searchoptions').show();
});
searchBoxes.blur(function(e){
    $(this).removeClass("active");
});

searchBox.focus(function(){
    if($(this).attr("value") == searchBoxDefault) $(this).attr("value", "");
});
searchBox.blur(function(){
    if($(this).attr("value") == "") $(this).attr("value", searchBoxDefault);
}); });

和 html 代码:

<div id="search" class="right">
  <form method="post" class="clearfix">
    <input class="box left" type="text" value="Search..." />
    <input class="button right" type="submit" value="" />
  </form>
  <div id="searchoptions">
    Options:<br /><input checked="checked" type="radio"> Option1</label>
    <input type="radio"> Option2</label>
    <input type="radio"> Option3</label>
  </div>
</div>

问题是:当我点击#search id之外时，如何隐藏#searchoptions？

我尝试了 body 点击，但有错误......并且运行不完美......

Answer 1

body 点击应该将会完美地工作。唯一要做的就是停止事件传播。这应该有效...

$('body').click(function() {
      $('#searchoptions').hide();
});

$('#searchoptions').click(function(event){
      event.stopPropagation();
});

@参见http://api.jquery.com/event.stopPropagation/