Проблема с логикой щелчка вложенной навигации

Question

Я пытаюсь получить простую вертикальную навигацию, чтобы отображать дочерние элементы элемента списка по щелчку.

Однако, когда вы нажимаете на любой из этих вложенных элементов списка детей, вы по существу снова нажимаете на элемент родительского списка. Что вызывает функцию щелчка, чтобы удалить «.active» и закрывает элемент родительского списка прямо перед тем, как пользователь перенаправляется на выбранную страницу. Это выглядит плохо и совершенно раздражает.

Любые советы о том, как получить функцию щелчка, чтобы не влиять на элементы списка детей?

$('#sidebar > li.parent').click(function(){ 
    if($(this).hasClass('active')){ 
       $(this).removeClass('active'); 
     }else{ 
       $(this).addClass('active'); 
    } 
}); 

HTML

<aside id="tertiary" class="tertiary"> 
    <ul id="sidebar" class="sidebar"> 
     <li class="active"><a href="/">Portal</a></li> 
     <li><a href="ecards.html">Start Here</a></li> 
     <li><a href="ecards.html">Cards</a></li> 
     <li class="parent"><a href="programs.html">Programs</a> 
      <ul> 
       <li><a href="#">LOS</a></li> 
       <li><a href="#">Safety</a></li> 
       <li><a href="#">Retirement</a></li> 
       <li><a href="#">Wellness</a></li> 
       <li><a href="#">Investors</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Marketplace</a></li> 
     <li><a href="#">Reporting</a></li> 
    </ul> 
</aside> 

Answer 1

Вы можете добавить обработчик щелчка для дочерних элементов, используемых stopPropagation чтобы предотвратить событие щелчка кипящий родительских элементов:

$('#sidebar > li li').click(function(e){ 
    e.stopPropagation(); 
}); 

Дальнейшее чтение: MDN docs for Event.

Answer 2

Вы должны были бы остановить распространение в детях ... не родительский

http://jsfiddle.net/TrueBlueAussie/g6a496Lf/

$('#sidebar > li.parent').click(function (e) { 
    e.preventDefault(); 
    $(this).toggleClass('active'); 
}).find("ul li").click(function(e){ 
    e.stopPropagation();  
}); 

The e.preventDefault() только там, чтобы остановить ссылку нажав на родителе в примере. e.stopPropagation() останавливает детский щелчок, пузырящийся по DOM.

Я прикован два обработчика вместе, так что вам не нужно отдельный селектор, как это:

$('#sidebar > li.parent ul li").click(function(e){ 
    e.stopPropagation();  
}); 

Answer 3

Перед тем, как остановить распространение событий, потребуется некоторое время, чтобы раскрутить на why you shouldn't do so.

От css-tricks.com, «Опасности Остановка событий Размножение», очень кратко:.

«Изменение одного, мимолетное событие может показаться безобидными на первый, но он приходит с рисками, когда вы изменить поведение, которое люди ожидают, и на этот другой код зависит, у вас будут ошибки. Это всего лишь вопрос времени ».

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

С этим сказанным, вы могли бы сделать что-то вроде

$('#sidebar').on('click', function(e) { 
    var $target = $(e.target).closest('li'); 

    if ($target.hasClass('parent')) { 
     $target.toggleClass('active'); 
    } 
}); 

Рабочий пример: http://jsfiddle.net/g6a496Lf/1/