点击外面>隐藏()

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？

我试着点击身体,但有虫子......并且没有完美运行......

Answer 1

车身点击应该会很好地工作.唯一要做的就是停止事件传播.这应该工作......

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

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

@see http://api.jquery.com/event.stopPropagation/