js, 树状菜单隐藏显示
js写的不是很严谨~~~嘿嘿
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#ul_tree ul {
display: none;
}
</style>
<title>树状菜单</title>
</head>
<body>
<ul id="ul_tree">
<li><a href="javascript:void(0)">a</a>
<ul class="ul-second">
<li><a href="javascript:void(0)">aa</a>
<ul>
<li><a href="javascript:void(0)">aa</a>
<li><a href="javascript:void(0)">aa</a>
<li><a href="javascript:void(0)">aa</a>
</ul>
</li>
<li><a href="javascript:void(0)">ab</a>
<ul>
<li><a href="javascript:void(0)">bb</a>
<li><a href="javascript:void(0)">bb</a>
<li><a href="javascript:void(0)">bb</a>
</ul>
</li>
<li><a href="javascript:void(0)">ac</a></li>
<li><a href="javascript:void(0)">ad</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">b</a>
<ul class="ul-second">
<li><a href="javascript:void(0)">ba</a></li>
<li><a href="javascript:void(0)">bb</a></li>
<li><a href="javascript:void(0)">bc</a></li>
<li><a href="javascript:void(0)">bd</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">c</a>
<ul class="ul-second">
<li><a href="javascript:void(0)">ca</a></li>
<li><a href="javascript:void(0)">cb</a></li>
<li><a href="javascript:void(0)">cc</a></li>
<li><a href="javascript:void(0)">cd</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">d</a>
<ul class="ul-second">
<li><a href="javascript:void(0)">da</a></li>
<li><a href="javascript:void(0)">db</a></li>
<li><a href="javascript:void(0)">dc</a></li>
<li><a href="javascript:void(0)">dd</a></li>
</ul>
</li>
</ul>
<script>
(function(){
var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++){
links[i].addEventListener('click', function(e){
setDisplay(e.target);
});
}
})();
function setDisplay(obj){
var fatherLi = getParent(obj, 'li');
var childUl = getFirstLevelChild(fatherLi, 'ul');
if(childUl.length > 0){
//console.log(childUl[0].style.display);
if(childUl[0].style.display == ''){
childUl[0].style.display = "none";
}
if(childUl[0].style.display == 'block'){
childUl[0].style.display = "none";
}else {
childUl[0].style.display = "block";
}
}
}
function getFirstLevelChild(obj, tagname){
var children = obj.childNodes;
var returns = new Array();
for(var i = 0, j = 0; i < children.length; i++){
if(children[i].nodeName.toLowerCase() == tagname.toLowerCase()){
returns[j] = children[i];
j++;
}
}
return returns;
}
function getParent(obj, parentTag){
//console.log(obj);
//alert();
var returns;
var _parent = obj.parentNode;
//console.log(_parent);
//console.log(_parent.nodeName);
if(_parent.nodeName.toLowerCase() == parentTag.toLowerCase()){
returns = _parent;
}else{
returns = getParent(_parent, parentTag);
}
return returns;
}
</script>
</body>
</html>
