Остановка распространения

Question

У меня есть панель, которая открывается и закрывается, чтобы отобразить меню, щелкнув элемент с классом .open. Когда я сначала нажимаю на нее, все в порядке, панель открывается. Когда панель открыта, я нажимаю на пункт меню, и панель закрывается.

Проблема, с которой я столкнулся, заключается в том, что после закрытия панели после нажатия на пункт меню мне нужно дважды нажать .open, прежде чем панель снова откроется.

Я первый запускаю это:

$(".open").toggle(function(){ 
    $(".header").animate({height:"100%"},200); 
    },function(){ 
     $(".header").animate({height:50},200); 
}); 

Это открывает панель с меню, то при нажатии на пункт меню я сделать:

$(".navMore li a").on("click", function(e) { 
    e.preventDefault(); 
    ... 

ли проблема с распространением ? Добавление:

$(".navMore li a").on("click", function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 

Все еще оставляет меня с той же проблемой.

Answer 1

click событие пузыри в JQuery. Чтобы предотвратить то, что вам нужно прекратить распространение от пузырьков вверх на нижнем элементе и, остановите обработчик верхнего элемента при стрельбе.

В функции $('.open') вам нужно поместить следующее:

$(".open").toggle(function(event) { 
    if(!$(event.target).is("a")) 
     { 
      $(".header").animate({height:"100%"},200); 
     } 
},....);