javascript - jquery 输入字段聚焦除 div

Question

我正在提出搜索的 ajax 建议，其中，将显示一个建议框

<div id="searchbox">
    <input type="text" name="search" class="searchinput"/>
</div>

<div id="sugbox">
 ......
 <a href="product.php?id=2" >Item 1</a>
 .....
</div>

和Javascript

$('#searchbox .searchinput').focus(
 function () {
    $('#searchbox #sugbox').show();
 });

 $('#searchbox .searchinput').focusout(
 function () {
    $('#searchbox #sugbox').hide();
 });

如果搜索文本框 #searchbox .searchinput 是 focus，建议框将打开，如果 focusout，建议框将隐藏。问题:每当我单击建议框上的链接时，建议框都会隐藏(由于输入 focusout 事件)。

如何检查目标 div 是否是建议框所以不要隐藏框例如..

 $('#searchbox .searchinput').focusout(
 function () {
    if(target div is not sugbox)
        $('#searchbox #sugbox').hide();
 });

Answer 1

尝试在悬停类中为 sugbox 分配一个类

 $(".searchinput").focus(function(){
   $("#sugbox").show();
});
$(".searchinput").focusout(function(){
   if(!$("#sugbox").hasClass("hovered"))
   $("#sugbox").hide();
});
 $("#sugbox").hover(function(){
   $(this).addClass("hovered");
},function(){
   $(this).removeClass("hovered");
 });

这里是 jsfiddle 的例子:http://jsfiddle.net/kyawlay/9wg49L2b/5