隱藏動態創建的菜單點擊頁面上的任何地方jquery

我有一些動態創建的菜單，需要隱藏每當用戶點擊頁面上的任何地方。如果用戶單擊菜單或試圖打開另一個菜單，則需要這樣做。隱藏動態創建的菜單點擊頁面上的任何地方jquery

我還希望事件處理程序在完成隱藏時解除綁定。我找到了一個解決方案，使用document.on()一個one()，但真的想限制document處理程序進一步向下的DOM。問題是它打破了我的代碼。

任何幫助與優雅的解決方案讚賞。

主要的原因我想這樣做是爲了能夠防止event propagation如：

Succeeding propagation, failing one() clickhandler 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>

來源

2012-11-08 Jan

我檢查**傳承傳播，沒有一個（）函數clickhandler DEMO **，但怎麼也找不到一個（）是不及格的???你能詳細說明一下嗎？ – Tapan

單擊一個菜單，然後單擊其他。第一個菜單不會隱藏。 – Jan

剛剛意識到'stopPropagation（）'會阻止'document.one（）'事件處理程序觸發......當然。 *嘆* *即使*沒有*'stopPropagation（）'，'document.one（）'失敗......任何想法爲什麼？ – Jan

感謝@TapanC我意識到我犯了一個明顯的錯誤與stopPropagation()，當然也應防止document.one()事件觸發從。我不明白爲什麼document.one()仍然甚至沒有stopPropagation()運行，但這裏有一個工作的解決方案。

雖然不完全優雅（我不喜歡全球hide()命令），所以更好的建議表示讚賞！ :)

Working (unpretty) solution 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-09 09:37:55 Jan

隱藏動態創建的菜單點擊頁面上的任何地方jquery

回答

相關問題