Скрыть динамически созданное меню при щелчке в любом месте страницы jquery

У меня есть несколько динамически создаваемых меню на странице, которые нужно скрывать всякий раз, когда пользователь щелкает где-нибудь на странице. Это должно сработать, если пользователь щелкает меню или пытается открыть другое меню.

Я также хочу, чтобы обработчик событий отвязался после завершения скрытия. Я нашел решение, использующее document.on() один one(), но мне бы очень хотелось ограничить document обработчик чем-то более низким по DOM. Проблема в том, что это нарушает мой код.

Любая помощь с элегантным решением приветствуется.

Основная причина, по которой я хочу это сделать, - это предотвратить event propagation, например:

ДЕМО с ошибкой распространения

Успешное распространение, сбой 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>​

events dynamic hide jquery event-propagation
person Jan    schedule 08.11.2012    source источник
comment
Я проверил Успешное распространение, провал одного () clickhandler DEMO, но не смог найти, как one () не работает в этом ??? не могли бы вы подробнее рассказать об этом?   -  person Tapan    schedule 09.11.2012
comment
Щелкните одно меню, затем щелкните другое. Первое меню не скрою.   -  person Jan    schedule 09.11.2012
comment
Только что понял, что stopPropagation() предотвратит запуск document.one() обработчика событий ... Конечно. вздох Дело в том, что даже без stopPropagation(), document.one() не работает ... Есть идеи, почему?   -  person Jan    schedule 09.11.2012

Ответы (1)


arrow_upward
0
arrow_downward

Благодаря @TapanC я понял, что совершил очевидную ошибку с stopPropagation(), конечно, это должно предотвратить запуск события document.one(). Я не понимаю, почему document.one() все еще не работает даже без stopPropagation(), но вот рабочее решение.

Не совсем элегантно (мне не нравится глобальная команда hide()), поэтому любые лучшие предложения приветствуются! :)

ДЕМО рабочего (некрасивого) решения

$(".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();
});
person Jan    schedule 09.11.2012