0

私の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();
    }
});

私の質問は、 div#suggestionsの外をクリックしたときにa を非表示にする方法です。#suggestions#search に文字がない場合にのみ回避されるようになりました

4

2 に答える 2

1

ドキュメント内のチェックを行わないでください:

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

suggestionsさらに、divがクリックされた場合にアイテムを表示したままにする場合は、これを追加します。

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

これがデモフィドルです

于 2013-01-10T16:07:26.773 に答える
1

これを試して

$('html').click(function(e){
   if (!($(e.target).is('#suggestions'))&&($(e.target).closest('#suggestions').length==0)) {
    $('#suggestions').hide();
    }
});
于 2013-01-10T16:10:51.153 に答える