<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ul>
<li>一级菜单ITEM
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单ITEM
<ul>
<li>三级菜单</li>
<li>三级菜单</li>
<li>三级菜单</li>
<li>三级菜单
<ul>
<li>四级菜单</li>
<li>四级菜单</li>
<li>四级菜单</li>
<li>四级菜单</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>一级菜单</li>
<li>一级菜单ITEM
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单ITEM
<ul>
<li>三级菜单</li>
<li>三级菜单</li>
<li>三级菜单</li>
<li>三级菜单</li>
</ul>
</li>
</ul>
</li>
<li>一级菜单</li>
</ul>
</body>
</html>
<script>
var list = document.getElementsByTagName("li");//获取所有li
//为每个li添加点击事件，判断是否有子元素
for(var i = 0; i < list.length; i++){
list[i].onclick = function(e){
var e = e || event;
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
//li如果有子元素
if(this.children[0]){
if(this.children[0].style.display == "none"){
this.children[0].style.display = "block";
}else{
this.children[0].style.display = "none";
}
}
}
}
</script>