jquery show hide division

Question

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

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

问题在于，当我点击moresearch div时，div会关闭，但只有在外部点击时才会关闭。

Answer 1

首先，为什么要嵌套焦点和模糊事件绑定？这样，每次“焦点”事件被触发时，“模糊”都会被绑定（但它不会被解除绑定）。但这不是问题所在。

一种可能的解决方案是检查焦点在模糊回调中的元素。有关如何执行此操作的信息，请查看When onblur occurs, how can I find out which element focus went *to*?。

也许是这样的：

$(".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还是其中一个孩子。没试过。

Answer 2

试试这个：

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

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