為什么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

因為click事件將使DOM冒泡並觸發其祖先上的click事件。

添加.stopPropagation() ，您可以防止這種情況：

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

jsFiddle示例

Answer 2

您的.dropdown嵌套在.dropdown-btn導致任何進一步的單擊都會觸發父事件。

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

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

Answer 3

您已經嵌套了 .dropdown-btn元素，並且沒有stopPropagation ，因此單擊一個元素還會單擊其所有祖先。

注意：為了回答這個問題，我必須點擊一個外部站點的鏈接，這樣我才能看到您所有的問題。 Stackoverflow問題應各有千秋。 SO現在甚至具有snipit功能，該功能與JSFiddle相同，但在本地。