Javascript JQuery事件冒泡问题

JSFiddle：

下拉菜单有问题

“问题我的子类别”列表项中有一个ul/下拉列表，因此我抓起该列表项并使用“.find”获取下拉列表，然后尝试滑动切换它

问题是我有3个列表项，当我单击其他列表项时，它们也会打开和关闭其他列表项，例如，只有第一个列表项上的下拉列表，但如果单击第二个/第三个列表项，它们也会切换

我认为这与事件冒泡有关，因为我认为“.find”只向下遍历，而不是向上遍历

有人能解释为什么会发生这种情况吗？谁发生了冒泡事件以及如何解决它

干杯

HTML

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();
  });
});

---

将JS更改为以下内容： $.dropdown-item.onclick，function{ e、 防止违约； $this.find.sub-dropdown.toggle； }; $.sub-dropdown.onclick，function e{ e、 停止传播； $this.find.sub-dropdown-child.slideToggle； }; $.sub下拉菜单-child.onclick，function e{ e、 停止传播； }; .子下拉列表， .子下拉式子菜单{ 显示：无； } 2件事：

将子项的单击事件单独保留在第一个事件之外。 您必须已将单击事件附加到li.DropdownSubItem而不是ul.DropdownSubItem。 这是更新后的代码和

---

错误：它甚至在点击Sub-Cat Child时也会滑动1@MilanChheda谢谢，修正了。@Arg0n谢谢，伙计，你能解释一下我做错了什么/你为什么这样做吗？Cheers@JoeConsterdine添加了一个breif解释。嗨，伙计，谢谢你的解释。除了上一节添加了传播之外，我完全理解了这一点。事件绑定如何工作，即传播如何修复它？

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

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();
  });
});

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

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