Скрийте динамично създаденото меню при щракване където и да е на страницата jquery

Имам няколко динамично създадени менюта на страница, които трябва да се скрият, когато потребителят кликне някъде на страницата. Това трябва да работи, ако потребителят щракне върху менюто или се опита да отвори друго меню.

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

Всяка помощ с елегантно решение се оценява.

Основната причина, поради която искам да направя това, е да мога да предотвратя event propagation като например в:

ДЕМОНСТРАЦИЯ на неуспешно разпространение

Успешно разпространение, неуспешно one() ДЕМОНСТРАЦИЯ на обработка на кликване

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
Проверих Успешно разпространение, неуспешно DEMO на манипулатора за кликване на one(), но не можах да намеря как 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