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

このサンプル.btn-slideは私のテキストボックスです。フォーカスされると、moresearchdiv が表示されます。ぼかすとdivが隠れる。

問題は、moresearchdivをクリックするとdivが閉じますが、外側をクリックしたときにのみ閉じる必要があることです。

4

2 に答える 2

3

まず、フォーカス イベントとブラー イベントのバインドをネストするのはなぜですか。そうすれば、「フォーカス」イベントが発生するたびに「ぼかし」がバインドされます (ただし、バインドは解除されません)。しかし、それはここでは問題ではありません。

考えられる解決策の 1 つは、blur コールバックでフォーカスが移動した要素を確認することです。Onblur が発生したときに、どの要素のフォーカスが *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 であるか、その子の 1 つであるかがチェックされます。試していません。

于 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 に答える