Нажмите, Переключить, Jquery

Question

var flip = 0;  
     $("#aabbcc").click(function () {  
         $("#navigation_menu_1").toggle( flip++ % 2 == 0 );  
});

<div id="aabbcc"></div> 
  <div id="navigation_menu_1">
<ul>
  <a href="#"><li>Navigation Item</li></a>
</ul> 

Я использую этот небольшой скрипт для «меню щелчка». Я пытаюсь выполнить это для активного меню, которое вызывается одной из кнопок для вывода: нет, еслимышь покидает область div, которая была вызвана одной из кнопок.

Таким образом, в основном я нажимаю кнопку меню, появляется div, но если я щелкну в любом месте из div, меню вернется к

Это кажется простым, но я был в течение нескольких часов.

Заранее благодарен за любые предложения или советы.

Answer 1

Ого, а почему счетчик?

Почему бы просто:

 $("#aabbcc").click(function () {
     $("#navigation_menu_1").show();
});

Кроме того, вы вообще не обрабатываете клики вне div . Так что оно (должно) никогда не исчезнет . Это может быть немного медленно (нуждается в улучшении), но оно должно работать, чтобы скрыть это снова:

$(div).not("#aabbcc").click(function () {
     $("#navigation_menu_1").hide();
});

Опять же, выбор каждого элемента div и привязка события щелчка - плохая идея, и я думаю, что может быть что-то вроде «Привязать к щелчкам в любом месте, кроме этого объекта», но вы получите картинку.

Answer 2

Один из способов сделать это - зарегистрировать click() в документе.Если event.target.id не равно некоторому ограничению, просто скройте навигацию.

$(document).click(function(event) {
    var a = $(event.target).andSelf().parents("#navigation_menu_1");
    if (a.length == 0 && $("#navigation_menu_1").is(":visible")) {
        $("#navigation_menu_1").toggle();
    }
});

Пример кода на jsfiddle .

Кроме того,flip переменная не нужна, вы можете просто вызвать .toggle() напрямую.

Answer 3

Вы хотите отобразить: ни один щелчок за пределами события div или mouseover / mouseout? Если вы хотите скрыть, когда он регистрирует щелчок мыши за пределами div, используйте это:

jQuery(document).one("click", function() { jQuery("#navigation_menu_1").fadeOut(); });

Пример: http://jsfiddle.net/ckaufman/mU89N/