2

以下のスクリーンショットでは、大きな緑色の長方形が表示されます。この区分は、「マイ アカウント」リンクをクリックすると表示されます。その後、「非表示」画像をクリックして非表示にすることができます。

スクリーンショット: http://knowwhovotes.com/somecap.JPG

ユーザーが部門の外のどこかをクリックすると、緑色の部門が非表示になるようにしたいと思います。ぼかし機能を試してみましたが、うまく動作しませんでした。

ここに私がすでに持っているコードがあります:

<script>
$(document).ready(function() {
    $("#my_account_button").click(function() {
        $("#c_fancy").css({'display' : 'block'});
        $("#my_account").slideDown("Slow");
    });
    $("#hide_account").click(function() {
        $("#c_fancy").css({'display' : 'none'});
        $("#my_account").slideUp("Slow");
    });
});
</script>
4

1 に答える 1

1

まず、フォーカス/ぼかしは通常、input要素のみを対象としています。divそれらは要素に対して発火しません。

divドキュメントをクリックしたときに非表示にする必要がありますが、ドキュメント自体またはその中の何かをクリックしたときは非表示にする必要はありません。divこれを行うには、ドキュメントにクリック ハンドラーを追加し、次のdivように DOM ツリーの上方へのクリックの伝播を停止します。

$(document).ready(function() {
    $("#my_account_button").click(function() {
        $("#c_fancy").css({'display' : 'block'});
        $("#my_account").slideDown("Slow");
    });
    $("#hide_account").click(function() {
        $("#c_fancy").css({'display' : 'none'});
        $("#my_account").slideUp("Slow");
    });

    $(document).click(function() {
        $("#c_fancy").css({'display' : 'none'});
        $("#my_account").slideUp("Slow");
    });
    $("#c_fancy").click(function(e) {
        e.stopPropagation();
    });
});

おそらく、統合して非表示コードを共通の関数に入れたいと思うでしょう:

$(document).ready(function() {
    $("#my_account_button").click(function() {
        $("#c_fancy").css({'display' : 'block'});
        $("#my_account").slideDown("Slow");
    });

    function hideAccount() { 
        $("#c_fancy").css({'display' : 'none'});
        $("#my_account").slideUp("Slow");
    }

    $("#hide_account").click(hideAccount);
    $(document).click(hideAccount);

    $("#c_fancy").click(function(e) {
        e.stopPropagation();
    });
});

div背後のコンテンツが暗くなっていることに気付きました。この暗くなるオーバーレイが#c_fancy要素の一部である場合、これは問題を引き起こす可能性があります。その場合は、コードを少し変更する必要があります。基本的に、上記のコードを から に変更し、$(document)もちろん適切に$('#myOverlay')置き換える必要があります。#myOverlay

于 2012-04-11T18:26:50.727 に答える