0

だから私はこの単純なスクリプトに取り組んでいます。このスクリプトは、オブジェクトの外側をクリックしたときにオブジェクトを非表示にする必要があります。

これがjsFiddleと私の簡単なコードです：

HTML

<div class="container">
    Click anywhere in this div

    <div style="border:1px solid blue; float:right;">div should still open/close</div>
</div>

<div class="close_me">Close me!</div>​

JS

$(".container").click(function(){
    $(".close_me").toggle();
});


helper_close(".close_me", ".container");

//this is simplified example of my function
function helper_close(target, avoid){
    //note that this function will be called once per object
    //so it should be fine to bind new event on document
    $(document).on("click", function(event){

        if( $(event.target).is(avoid) )
            return true;

        $(target).hide();
    });
}

ご覧のとおり、（一種の）問題は、close_me内部のどこかをクリックしたときにも表示/非表示になるはずcontainerですが、ご覧のとおり、現在は発生していません。

「避けたい」すべてのオブジェクトを指定できることはわかっていますが、そのコンテナー内に20個のdivがある場合はどうなりますか？コードは非常に醜く見えます...だから私はこれを行うためのより良い方法が必要です。

4

1 に答える 1

2

クリックされた要素がチェーンのどこかに「回避」セレクターに一致する親を持っているかどうかを確認します。そうでない場合は、非表示にします。

$(document).on("click", function(event){
    if(! $(event.target).closest(avoid).length ) $(target).hide();
});

フィドル

于 2012-12-12T19:07:43.020 に答える