Question

我的HTML代码如下：

<div style="float:right;">
    <form>
     <input id="search" onkeyup="lookup(this.value);" type="text" />
    </form>
    <div style="position:relative;">
       <div id="suggestions" style="position:absolute;"></div>
    </div>
</div>

我的jQuery代码如下：

$("#search").blur(function(){
   $('#suggestions').fadeOut();
});

我的JavaScript代码如下：

function lookup(inputString)
{
    if(inputString.length == 0) {
        $('#suggestions').fadeOut();
    } else {
        $.post("/ajax/search/", {queryString: ""+inputString+""}, function(data) { 
            $('#suggestions').fadeIn();
            $('#suggestions').html(data);
        });
    }
}

我试过以下但是没有用：

$(document.body).click(function(){
   if (!$('#suggestions').has(this).length) {
    $('#suggestions').hide();
    }
});

我的问题是当我点击#suggestions div之外时如何隐藏#suggestions。现在它只在#search

中没有字符时才会消失

Answer 1

不要在文档内部进行任何检查点击：

$(document).click(function () {
    $('#suggestions').hide();
});

如果您还想在单击div suggestions时显示该项目，请添加以下内容：

$('#suggestions').click(function(e) {
   e.stopPropagation();
});

这是一个演示Fiddle

Answer 2

试试这个

$('html').click(function(e){
   if (!($(e.target).is('#suggestions'))&&($(e.target).closest('#suggestions').length==0)) {
    $('#suggestions').hide();
    }
});

隐藏由onkeyup事件显示的div（在其外部单击时隐藏）

2 个答案: