js, 树状菜单隐藏显示
Posted whellote
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于js, 树状菜单隐藏显示的主要内容，如果未能解决你的问题，请参考以下文章
用原生JS写关于鼠标移入移出ul的二级菜单问题，怎么都实现不了效果