Javascript JS-从嵌套在应该可单击的项中的元素取消绑定单击操作

我有一个网站，我想有一个子菜单显示时，标题点击，并隐藏它，如果他们再次点击标题

但是，我希望能够在子菜单中单击而不使其消失，因为下面代码段中的

项不只是列表项，而是下拉列表等

我尝试添加
$（“#菜单>li:nth child（1）>ul”）。取消绑定（“单击”）
来绕过这个问题，但它不起作用


$（“#菜单>li:n子项（1）”）。在（“单击”，函数（）{
$（“#菜单>li:n子项（1）>ul”）。解除绑定（“单击”）；
if（$（“#menu>li:n子项（1）>ul”）.css（“display”）=“none”）{
$（“#menu>li:n个孩子（1）>ul”）.fadeIn（“慢”）；
}否则{
$（“#menu>li:n个孩子（1）>ul”）。淡出（“慢”）；
}
});
$（“#菜单>li:n子项（2）”）。在（“单击”，函数（）{
$（“#菜单>li:n子项（2）>ul”）。解除绑定（“单击”）；
if（$（“#menu>li:nth child（2）>ul”）.css（“display”）=“none”）{
$（“#menu>li:n个孩子（2）>ul”）.fadeIn（“慢”）；
}否则{
$（“#menu>li:n个孩子（2）>ul”）。淡出（“慢”）；
}
});
$（“#菜单>li:n子项（3）”）。在（“单击”，函数（）{
$（“#菜单>li:n子项（3）>ul”）。解除绑定（“单击”）；
if（$（“#menu>li:n子项（3）>ul”）.css（“display”）=“none”）{
$（“#menu>li:n个孩子（3）>ul”）.fadeIn（“慢”）；
}否则{
$（“#menu>li:n个孩子（3）>ul”）。淡出（“慢”）；
}
});
ul，li{
列表样式：无；
填充：0px；
边际：0px；
}
#菜单>李{
显示：内联块；
垂直对齐：顶部；
}
#菜单>li>ul{
显示：无；
}



菜单1

项目1
项目2
项目3



菜单2

项目1
项目2
项目3



菜单3

项目1
项目2
项目3


您可以使用
event.stopPropagation（）

来自MDN文档：

防止当前事件在捕获和冒泡阶段进一步传播

下面的示例显示，当您单击每个菜单项时，它不会触发其父元素的单击事件


$（“#菜单>li”）。在（“单击”上，函数（e）{
$（this.find（“>ul”）.fadeToggle（“slow”）；
});
$（“#菜单>li>ul”）。单击（功能（e）{
e、 停止传播（）；
});
ul，
李{
列表样式：无；
填充：0px；
边际：0px；
}
#菜单>李{
显示：内联块；
垂直对齐：顶部；
}
#菜单>li>ul{
显示：无；
}



菜单1

项目1
项目2
项目3



菜单2

项目1
项目2
项目3



菜单3

项目1
项目2
项目3


您可以使用
event.stopPropagation（）

来自MDN文档：

防止当前事件在捕获和冒泡阶段进一步传播

下面的示例显示，当您单击每个菜单项时，它不会触发其父元素的单击事件


$（“#菜单>li”）。在（“单击”上，函数（e）{
$（this.find（“>ul”）.fadeToggle（“slow”）；
});
$（“#菜单>li>ul”）。单击（功能（e）{
e、 停止传播（）；
});
ul，
李{
列表样式：无；
填充：0px；
边际：0px；
}
#菜单>李{
显示：内联块；
垂直对齐：顶部；
}
#菜单>li>ul{
显示：无；
}



菜单1

项目1
项目2
项目3



菜单2

项目1
项目2
项目3



菜单3

项目1
项目2
项目3


您需要对DOM进行一个小的更新，它将按如下方式工作：


$（'#菜单>li>span'）。单击（函数（）{
$（this.next（'ul'）.toggle（）；
})
$（'.child menu>li'）。单击（函数（）{
警报（$（this.html（））；
})
ul，li{
列表样式：无；
填充：0px；
边际：0px；
}
#菜单>李{
显示：内联块；
垂直对齐：顶部；
光标：指针
}
#菜单>li>ul{
显示：无；
}



菜单1

项目1
项目2
项目3



菜单2

项目1
项目2
项目3



菜单3

项目1
项目2
项目3


您需要对DOM进行一个小的更新，它将按如下方式工作：


$（'#菜单>li>span'）。单击（函数（）{
$（this.next（'ul'）.toggle（）；
})
$（'.child menu>li'）。单击（函数（）{
警报（$（this.html（））；
})
ul，li{
列表样式：无；
填充：0px；
边际：0px；
}
#菜单>李{
显示：内联块；
垂直对齐：顶部；
光标：指针
}
#菜单>li>ul{
显示：无；
}



菜单1

项目1
项目2
项目3



菜单2

项目1
项目2
项目3



菜单3

项目1
项目2
项目3


您可以简化代码，只需对所有
li的
使用一次单击事件，并使用
e.stopPropagation（）
在单击子
li
项时停止事件冒泡


$（“#菜单li ul”）。单击（功能（e）{
e、 停止传播（）；
})
$（“#菜单li”）。在（“单击”上，函数（e）