0 
$(document).ready(function () {
    $(".btn-slide").focus(function () {
        $("#moresearch").show("fast");
        $(".btn-slide").blur(function () {
            $("#moresearch").hide("fast");
        });
    });
});

在这个示例.btn-slide中是我的文本框。当它聚焦时，moresearch会显示 div。当 div 模糊时隐藏。

问题是，当我单击moresearchdiv 时，div 会关闭，但只有在单击外部时才会关闭。

4

2 回答 2

3

首先，为什么要嵌套焦点和模糊事件绑定？这样，每次触发 'focus' 事件时，'blur' 都会被绑定（但不会解除绑定）。但这不是这里的问题。

一种可能的解决方案是在模糊回调中检查焦点所在的元素。看看当 onblur 发生时，我怎样才能找出哪个元素焦点*到*？有关如何执行此操作的信息。

也许是这样的：

$(".btn-slide").blur(function(event) {
    var target = event.explicitOriginalTarget||document.activeElement;
    if (target != $("#moresearch")[0]) {
        $("#moresearch").hide("fast");
    }
}

编辑：或者更确切地说，这可能是诀窍：

if (!$("#moresearch").has($(target)) > 0 &&! $("#moresearch")[0] == target)

这将检查焦点离开的位置以及这是目标 div 还是其中一个子级。没试过。

于 2012-08-09T09:50:53.910 回答
0

尝试这个：

$(document).ready(function () {
    $(".btn-slide").focus(function () {
        $("#moresearch").fadeIn("fast");
        $('body').not('.btn-slide').click(function () {
            $("#moresearch").fadeOut("fast");
        });
    });
});

注意：当您想对动画进行操作时，请使用fadeIn()和fadeOut代替显示/隐藏。

于 2012-08-09T09:51:22.817 回答