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。问题：每当我单击建议框上的链接时，建议框就会隐藏（由于输入焦点事件）。

我如何检查目标 div 是否是建议框，所以不要隐藏该框 ex ..

 $('#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