Question

$('.searchbox').blur(function() {
   $("#gohan").hide();
});
$('.dropdown').blur(function() {
   $("#gohan").hide();
});

嗨，我有一个搜索框，当我输入字母时，会出现一个下拉列表（id = gohan），其中包含一个包含大量li“搜索结果”的ul。我希望每当下拉菜单或搜索框上的焦点消失时，下拉列表就会消失，即他们点击不在searchbox / ul / li中的内容。这两个事件处理程序分别工作正常，但我不知道如何使它们一起工作。我试着把它们串起来像

$('.dropdown, .searchbox').blur(function() {

但这导致了灾难性的失败。条件/选择器的任何想法来解决这个问题？我还尝试将下拉列表和搜索框封装到一个包含它们的div中并选择大容器，但这也不起作用。如果搜索框没有失焦，那么必须进行另一次检查以确定下拉列表是否也没有失焦。只有这样，如果两者都没有聚焦，那就进行隐藏。这是正确的逻辑吗？

Answer 1

如果你只是看了一下document.body获取点击和焦点，然后检查了已触发事件的目标，那么隐藏#gohan会更容易。基本上，如果用户点击或关注不属于“窗口小部件”或“窗口小部件元素”的内容，则隐藏控件并让用户继续执行他们正在执行的操作。

var handler = function(e){
    var isMyWidget = $(e.target).hasClass('searchbox') || $(e.target).hasClass('dropdown');
    if(!isMyWidget ){
        $('#gohan').hide();
    }
}


$(document.body).click(handler).focus(handler);

根据您的DOM和您正在观看的元素，您可能还可以检查搜索框/下拉列表的祖先，然后检查目标元素是否具有特定的祖先。

示例：

var isMyWidget = $(e.target).closest('.widgetContainer').length > 0;

这将使得如果你的小部件演变为包含其他控件，使用这些新控件将不会隐藏小部件（只要它们在同一个祖先中，即一些父div）。

Jquery选择多个事件

1 个答案: