jquery – 点击外> hide()

我有这个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代码：

问题是：当我在#search id之外点击时,如何隐藏#searchoptions？

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

最佳答案

身体点击应该完美.唯一要做的就是停止事件传播.这应该工作……

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

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

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