Почему jQuery дочерний селектор нацелен на родителя?

Question

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

$(".dropdown-btn").click(function() { 
    $(this).children(".dropdown").toggleClass("expanded"); 
}); 

Добавить стили, это работает.

.dropdown { 
    display: none; 
} 

.dropdown.expanded { 
    display: block; 
} 

Проблема возникает, когда я добавляю вложенное выпадающее меню. Когда я нажимаю на вложенный «.dropdown-btn», скрипт переключает класс раскрывающегося списка (как предполагается) , но он также переключает класс родителя! Чтобы лучше объяснить, что я имею в виду, осмотрите скрипку здесь: http://jsfiddle.net/3rm3ny1j/

У меня есть два вопроса. В чем причина такого поведения? Какое лучшее решение?

Answer 1

Поскольку событие щелчка пузырится на DOM и вызывает событие щелчка на его предках.

Добавить .stopPropagation() и вы можете предотвратить это:

$(".dropdown-btn").click(function (e) { 
    e.stopPropagation(); 
    $(this).children(".dropdown").toggleClass("expanded"); 
}); 

jsFiddle example

Answer 2

Вы вложенных.dropdown-btn элементов, и вы не stopPropagation, поэтому нажатие на одну и нажмет на всех его предок.

NB: Чтобы ответить на это, я должен был следовать ссылке на внешний сайт, чтобы я мог видеть всю вашу проблему. Вопросы, связанные с перегрузкой, должны стоять по существу. SO даже имеет функцию snipit, которая выполняет ту же работу, что и JSFiddle, но локально.

Answer 3

Ваш .dropdown вложен в .dropdown-btn вызывает какие-либо дополнительные клики, чтобы вызвать родительский событие.

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

Смотрите эту обновленную скрипку: http://jsfiddle.net/3rm3ny1j/2/