Javascript 单击时显示HTML子菜单

我正在尝试创建一个菜单，其中包含如下子项：

>Menu
 >Sub-Item
  >Sub-Sub-Item
  >Sub-Sub-Item2
 >Sub-Item2

我遇到的问题是，当我单击子项时，子项关闭（我不想要）

功能菜单触发器（e）{
如果（！hasClass（e，“活动”））{
e、 类列表。添加（“活动”）；
e、 高度=“自动”；
var child=getNextChild（e，“UL”）；
儿童，身高=0；
child.style.display=“block”；
child.height=“auto”；
}
否则{
if（类（e，“活动”））{
e、 类列表。删除（“活动”）；
var child=getNextChild（e，“UL”）；
儿童，身高=0；
child.style.display=“无”；
child.height=“0”；
}
}
}
函数类（元素、选择器）
{
var className=”“+选择器+”；
返回（“”+element.className+“”）。替换（/[\n\t]/g，“”）。indexOf（className）>1）
}
函数getNextChild（元素，标记名）{
对于（var index=0；索引a{background:url（images/arrowdown.png）无重复右中心；}
.goo可折叠.dropdown>a:hover{background:#f8url（images/arrowdown.png）不可重复右中！重要；}
.goo可折叠li ul li li a{background:#f5e6ff；}

我建议不要在HTML中内联事件处理程序。而是通过javascript附加事件侦听器。完成后，利用传递到

menuTrigger

函数的事件对象来确定事件的目标是否为子菜单。如果是子菜单且事件正在为父级，只需在

menuTrigger

方法的顶部执行

return

。显然，所使用的语法取决于您希望跨浏览器的方式。但是，由于这个限制，我也选择使用它

var-dropdowns=document.querySelectorAll（'.goo-collapsable.dropdown'）；
对于（变量i=0，len=dropdowns.length；i1）
}
函数getNextChild（元素，标记名）{
对于（var index=0；索引a{background:url（images/arrowdown.png）无重复右中心；}
.goo可折叠.dropdown>a:hover{background:#f8url（images/arrowdown.png）不可重复右中！重要；}
.goo可折叠li ul li li a{background:#f5e6ff；}

我研究了如何停止事件的传播，并添加了var evt=window.event；if（evt.stopPropagation）{evt.stopPropagation（）；}if（evt.cancelBubble！=null）{evt.cancelBubble=true；}对于每个if语句，它似乎停止了向父对象的传播。这不是开玩笑，我只是编辑我的答案，因为

stopPropagation

。我觉得自己很愚蠢，一开始就没有想到它。@James Yeah。这是一个完全的思维失误。

事件。preventDefault

甚至有IE9+Setti的相同支持ng cancelBubble（即使IE6+中支持弃用）将取消旧浏览器上的事件，这就是为什么我首先检查它是否存在的原因。