Question

我的网络上有一个搜索输入字段 - 与facebook上的搜索输入字段完全相似。当您在输入字段中键入任何字符时，jQuery会根据该字符创建自动建议的下拉div。效果很好。

但我有一个问题 - 如果输入区域不为空，则jQuery生成的div下拉列表始终保持打开状态，除非您从该输入字段中删除所有字符。

所以我的问题非常简单 - 当你点击div下拉列表（或输入字段，我猜）时，我怎么能做到 - 那个下拉列表只是消失了？

Answer 1

如果我们能看到一些代码会很有用，但您可以使用.blur或.focusout方法实现此目的。

Answer 2

$('input').blur(function() {
    $(this).hide();
});

Answer 3

这样的事情：

$(document).click(function (event){
    if( $(event.target).parents('.dropdown-div-class,.input-class').length==0 ){
        $('.dropdown-div-class').hide();
    }
});

dropdown-div-class是您需要隐藏的div类，input-class是输入字段的类。您可以更改选择器以满足您的需求。但是，在大多数情况下，所有这些脚本都包含此功能。检查是否有某些错误或其他阻止div被隐藏的内容。

Answer 4

您可以在您的身体上绑定点击事件，并检查点击的元素是下拉div还是下拉div的输入或子项。如果它们都不是真的那么你应该隐藏下拉列表。

jQuery下拉自动建议div - 在用户点击调用div之类的输入字段之后消失？

4 个答案: