为焦点/ onblur事件分组元素？

时间：2014-07-20 22:36:18

标签： javascript jquery html css

我有一个自动完成div，当用户键盘在搜索字段中时出现。我希望div在他们点击div之外时消失，所以我尝试了以下内容：

//SHOW THE DIV WHEN INPUT CLICKED
$('#searchbar').focus(function(){
    $('#div').show();   
});

//HIDE THE DIV WHEN FOCUS LOST
$('#searchbar').on("blur", function(){
    $('#div').hide();   
});

不幸的是，包含自动填充选项的div包含我希望用户点击的标签。一旦用户单击链接，div就会消失（因为输入字段的焦点丢失）。

那么有什么办法来组织＆＃39;带有输入字段的div，因此它们都可以被聚焦在＆＃39;当输入处于活动状态或单击div时？

问候，并提前感谢你！

编辑：这是我的HTML 

<div class="appBar">
    <table class="abTable">
        <tr>
            <td><b><a href="index.php"><span style="color:white;">gelDB</span></a></b></td>
            <td><input id="sbar" type="text" name="searchBar" class="searchBar" placeholder="Search for entries..." /></td>
            <td>
            <a href="entry.php"><img class="navButton" alt="" src="images/btn_new.png" style="width: 50px; height: 50px" /></a>
            <a href="browse.php"><img class="navButton" alt="" src="images/btn_browse.png" style="width: 50px; height: 50px" /></a>
            <a href="protocols.php"><img class="navButton" alt="" src="images/btn_proto.png" style="width: 50px; height: 50px" /></a>
            <img class="navButton" alt="" src="images/btn_permis.png" style="width: 50px; height: 50px" />
            </td>
            <td>
            <button class="menuButton"></button>
            </td>
        </tr>
        <div class="menuButtonDiv"></div>
    </table>
</div>
</head>
<br/>
<body>
<div id="acd" class="autoCompleteDiv">No results. Try searching something else.<hr></div>

以下是我正在做的事情的图形示例： enter image description here

2 个答案:

答案 0 :(得分：1)

想出来，必须使用以下代码：

$('#sbar').on("blur", function(){
    if ($('#acd').is(':hover')) {}
    else{$('#acd').hide();};
});

除非鼠标当前在（悬停在）div上，否则它基本上会隐藏div。

答案 1 :(得分：0)

试试这个：

<div id="box">
    <a href="#">link<a>
<div>

_ 

    $( "body" ).click(function() {
        // if the element that was clicked is #box OR any child of #box
        if($(event.target).is( "#box, #box > *" )) {

        } else {
            alert("outside the box");
        }
    });

demo：http://jsfiddle.net/J9yzj/2/

相关问题
最新问题