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

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

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

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

4

1 回答 1

2

#gohan如果您只是查看 document.body 的点击和焦点，然后检查触发事件的目标，那么隐藏您的会更容易。本质上，如果用户单击或关注不在您的“小部件”或“小部件元素”集内的内容，您将隐藏您的控件并让用户继续做他们正在做的事情。

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）。

于 2012-07-02T16:48:36.023 回答