0

ユーザーがページのどこかをクリックするたびに非表示にする必要があるページに、動的に作成されたメニューがいくつかあります。これは、ユーザーがメニューをクリックするか、別のメニューを開こうとした場合に機能する必要があります。

また、非表示が完了したら、イベント ハンドラーが自分自身をアンバインドするようにします。私はdocument.on()1つを使用して解決策を見つけましたが、ハンドラーをDOMのさらに下にあるものone()に制限したいと本当に思っています。document問題は、それが私のコードを壊すことです。

エレガントなソリューションの助けをいただければ幸いです。

私がこれをしたい主な理由は、次のようなことを防ぐことができるようにするためevent propagationです:

伝播の失敗 DEMO

伝播成功、one()クリックハンドラ DEMO失敗

Javascript

// I want to change "document" to ".menus" here
$(document).on("click", ".displayMenu", function(e)
{
    var $menu =  $(this).siblings(".menu");
    $(document).one("click", function(e2) 
       {
           if (e.target!=e2.target)
               $menu.hide(); 
       });
    $menu.toggle();
});​

HTML

<div class="menus">
    <div>
        <div class="displayMenu">Show menu 1</div>
        <div class="menu">menu 1</div>
    </div>
    <div>
        <div class="displayMenu">Show menu 2</div>
        <div class="menu">menu 2</div>
    </div>
</div>​
4

1 に答える 1

0

@TapanC のおかげで、私は明らかに間違いを犯したことに気付きました。stopPropagation()もちろん、document.one()イベントがトリガーされないようにする必要があります。document.one() なくても実行できない理由はわかりませんstopPropagation()が、ここに実用的な解決策があります。

hide()ただし、完全にエレガントというわけではありません (グローバルコマンドは好きではありません)。:)

実用的な (見栄えの悪い) ソリューション DEMO 

$(".menus").on("click", ".displayMenu", function(e)
{
    // Hide all
    $(".menu").hide();
    // Get current menu
    var $menu =  $(this).siblings(".menu").show();
    $(document).one("click", function(e2) 
       {
           if (e.target!=e2.target)
               $menu.hide(); 
       });
    // Prevent propagation
    e.stopPropagation();
});
于 2012-11-09T09:37:55.843 に答える