JQuery Event Bubbling問題

Question

JSFiddle：https://jsfiddle.net/3v2qav58/

存在下拉菜單問題。

問題我的子類別列表項目裏面有一個ul/dropdown，所以我抓住列表項並使用'.find（）'來獲取下拉列表，然後嘗試使用slideToggle。

問題是我有3個列表項目，當我點擊其他列表項目時，他們也打開並關閉其他列表項目。例如，第一個列表項目只有下拉列表，但如果您單擊第二個/第三個列表項目也切換。

我認爲這是關於事件冒泡的，因爲我認爲'.find（）'只能遍歷下來而不是上升？

有些人可以解釋爲什麼會發生事件冒泡發生以及如何解決它？

乾杯

HTML

<ul class="dropdown"> 
    <li class="dropdown-item"> 
    <a href="">Cat 1</a> 
    <ul class="sub-dropdown"> 
     <li class="dropdown-sub-item"> 
     <a href="#">Sub Cat 1</a> 
     <ul class="sub-dropdown-child"> 
      <li class="sub-dropdown-child-item"><a href="#">Sub Cat Child 1</a></li> 
      <li class="sub-dropdown-child-item"><a href="#">Sub Cat Child 2</a></li> 
      <li class="sub-dropdown-child-item"><a href="#">Sub Cat Child 3</a></li> 
     </ul> 
     </li> 

CSS

.sub-dropdown, 
.sub-dropdown-child { 
    display: none; 
} 

JQuery的

var dropdownItem = $(".dropdown-item"); 
var dropdownSubItem = $(".sub-dropdown"); 
var DropdownSubItem = $(".dropdown-sub-item"); 
var subDropdownChild = $(".sub-dropdown-child"); 

// Open 
dropdownItem.on("click", function(e) { 
    e.preventDefault(); 
    dropdownSubItem.show(); 

    // Open sub cat 
    dropdownSubItem.on("click", function(e) { 
    e.stopPropagation(); 
    $(this).find(subDropdownChild).slideToggle(); 
    }); 
}); 

Answer 1

更改您的JS以下幾點：

$(".dropdown-item").on("click", function(e) { 
 
    e.preventDefault(); 
 
    $(this).find(".sub-dropdown").toggle(); 
 
}); 
 
$(".sub-dropdown").on("click", function(e) { 
 
    e.stopPropagation(); 
 
    $(this).find(".sub-dropdown-child").slideToggle(); 
 
}); 
 
$(".sub-dropdown-child").on("click", function(e) { 
 
    e.stopPropagation(); 
 
});

.sub-dropdown, 
 
.sub-dropdown-child { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="dropdown"> 
 
    <li class="dropdown-item"> 
 
    <a href="">Cat 1</a> 
 
    <ul class="sub-dropdown"> 
 
     <li class="dropdown-sub-item"> 
 
     <a href="#">Sub Cat 1</a> 
 
     <ul class="sub-dropdown-child"> 
 
      <li class="sub-dropdown-child-item"><a href="#">Sub Cat Child 1</a></li> 
 
      <li class="sub-dropdown-child-item"><a href="#">Sub Cat Child 2</a></li> 
 
      <li class="sub-dropdown-child-item"><a href="#">Sub Cat Child 3</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="dropdown-item"> 
 
    <a href="">Cat 2</a> 
 
    <ul class="sub-dropdown"> 
 
     <li class="dropdown-sub-item"> 
 
     <a href="#">Sub Cat 2</a> 
 
     <ul class="sub-dropdown-child"> 
 
      <li class="sub-dropdown-child-item"><a href="#">Sub Cat Child 1</a></li> 
 
      <li class="sub-dropdown-child-item"><a href="#">Sub Cat Child 2</a></li> 
 
      <li class="sub-dropdown-child-item"><a href="#">Sub Cat Child 3</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

與您的代碼的問題是，你在哪裏，顯示所有子項，並單擊一個的不只是分項目：

dropdownSubItem.show(); //This shows all sub-items 

我取代了這一點：

$(this).find(".sub-dropdown").toggle(); 

此外，您在根項單擊時子項目的事件結合多次做：

dropdownItem.on("click", function(e) { 
    ... 
    dropdownSubItem.on("click", function(e) { 
    ... 
    }); 
    ... 
}); 

這導致每次點擊事件綁定。

Answer 2

兩件事情：第一事件之外的子項

• 保持click事件，分別。
• 您必須將您的點擊事件附加到li.DropdownSubItem而不是ul.dropdownSubItem。

下面是更新後的代碼和Fiddle

// Open 
dropdownItem.on("click", function(e) { 
    e.preventDefault(); 
    dropdownSubItem.show(); 
}); 

// Open sub cat 
DropdownSubItem.on("click", function(e) { 
    $(this).find(subDropdownChild).slideToggle(); 
    e.stopImmediatePropagation(); 
});