爲什麼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，所以點擊一個又按下了所有祖先。

注意：爲了回答這個問題，我不得不跟隨一個鏈接到外部網站，以便我可以看到你所有的問題。 Stackoverflow問題應該站在自己的優點。所以即使有現在的snipit功能，它與JSFiddle完成相同的工作，但在本地執行。

Answer 3

你.dropdown嵌套在.dropdown-btn內造成任何進一步點擊觸發父事件。

通過分離觸發器和下拉菜單，您可以阻止它們向上觸發。

看到這個更新小提琴：http://jsfiddle.net/3rm3ny1j/2/