<!DOCTYPE
html
>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title> 树形菜单 </title>
</head>
<body>
<ul>
<li> 一级菜单
<ul>
<li> 二级菜单
<ul>
<li> 三级菜单 </li>
<li> 三级菜单 </li>
<li> 三级菜单 </li>
<li> 三级菜单 </li>
<li> 三级菜单 </li>
</ul>
</li>
<li> 二级菜单 </li>
<li> 二级菜单 </li>
<li> 二级菜单 </li>
<li> 二级菜单 </li>
</ul>
</li>
<li> 一级菜单 </li>
<li> 一级菜单 </li>
<li> 一级菜单 </li>
<li> 一级菜单 </li>
</ul>
<script>
var _lis = document. getElementsByTagName( "li") ;
for( var i = 0 ;i<_lis. length ;i++){
_lis[i]. onclick = function (e) {
e =e || window. event ;
e. stopPropagation ? e. stopPropagation() : e. cancelBubble = true ;
//console.log(e.target.children.length > 0);
if(e. target. children. length > 0){
var _style = getStyle(e. target. children[ 0] , "display") ;
if(_style == "none"){
e. target. children[ 0]. style. display = "block" ;
} else {
e. target. children[ 0]. style. display = "none" ;
}
}
}
}
function getStyle(dom ,styleName){
return dom. currentStyle ? dom. currentStyle[styleName] : getComputedStyle(dom)[styleName] ;
}
</script>
</body>
</html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title> 树形菜单 </title>
</head>
<body>
<ul>
<li> 一级菜单
<ul>
<li> 二级菜单
<ul>
<li> 三级菜单 </li>
<li> 三级菜单 </li>
<li> 三级菜单 </li>
<li> 三级菜单 </li>
<li> 三级菜单 </li>
</ul>
</li>
<li> 二级菜单 </li>
<li> 二级菜单 </li>
<li> 二级菜单 </li>
<li> 二级菜单 </li>
</ul>
</li>
<li> 一级菜单 </li>
<li> 一级菜单 </li>
<li> 一级菜单 </li>
<li> 一级菜单 </li>
</ul>
<script>
var _lis = document. getElementsByTagName( "li") ;
for( var i = 0 ;i<_lis. length ;i++){
_lis[i]. onclick = function (e) {
e =e || window. event ;
e. stopPropagation ? e. stopPropagation() : e. cancelBubble = true ;
//console.log(e.target.children.length > 0);
if(e. target. children. length > 0){
var _style = getStyle(e. target. children[ 0] , "display") ;
if(_style == "none"){
e. target. children[ 0]. style. display = "block" ;
} else {
e. target. children[ 0]. style. display = "none" ;
}
}
}
}
function getStyle(dom ,styleName){
return dom. currentStyle ? dom. currentStyle[styleName] : getComputedStyle(dom)[styleName] ;
}
</script>
</body>
</html>