2

我有一个<input>当专注于它时会显示一个建议下拉菜单。单击其他任何内容时，建议都会消失。问题是我似乎无法弄清楚如何做到这一点，因此当单击建议时<div>，模糊事件不会运行。

下面是一些 HTML：

<label id="testTagsLabel">Tags:</label>
<input type="text" name="tags" id="testTags" placeholder="Ex: Poem, Edgar Allen Poe">
<div id="tagSuggest">
<ul>
<li class="tagSuggestTag">testtag</li>
<li class="tagSuggestTag">testtag2</li>
<li class="tagSuggestTag">testtag3</li>
<li class="tagSuggestTag">testtag4</li>
</ul>
</div>

下面是一些 JavaScript：

  $('#testTags').focus(
     function(){
        $('#tagSuggest').show();
     });

  $('#testTags').blur(
     function(){
        $('#tagSuggest').hide();
     });
4

2 回答 2

4

尝试类似：

$("#yourinput").blur(function(e) {
    if(!$(e.target).is(".suggestDiv")) {
        // close the suggest div
    }
});

更新：（哎呀，上面的代码不像我想象的那样工作）

这应该有效：

$(document).click(function(e) {
    if (!$(e.target).is("#suggest")) {
        $("#suggest").hide();
    }
});

演示：http: //jsfiddle.net/PNVCL/

更新2：

我忘记了你仍然需要模糊，因为当你通过点击选项卡切换到另一个输入时，你可能想隐藏建议 div。这是一个更新的演示：http: //jsfiddle.net/PNVCL/1/

单击任何位置仍会关闭建议 div（建议 div 本身或输入除外）以及单击选项卡以切换到另一个输入。仍然需要改进，但你应该可以从这里开始。

于 2011-04-02T22:51:14.413 回答
2

您不应该使用 blur 事件，因为不可能区分由单击建议框引起的模糊和另一个模糊（选项卡、窗口模糊、右键单击......）。

@dakis 给出的解决方法是使用文档上的单击事件，但使用建议框关闭该框。我建议动态添加和删除文档单击处理程序以避免开销，并允许用户在不关闭框的情况下单击该字段。

在这里演示：http: //jsfiddle.net/fvwPn/

此外，当按下 TAB 时，我使框关闭。我还添加了一个肮脏的黑客版本（评论），它使用模糊事件和一个使用超时的大黑客（因为这两个事件是独立触发的，延迟取决于客户端浏览器和速度......是的，这是一个肮脏的黑客）。

于 2011-04-02T23:33:27.710 回答