javaScript树形结构

来源：互联网发布：浙江华通云数据上市编辑：程序博客网时间：2024/05/21 15:12

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.0.js" ></script>
<title></title>
<script type="text/javascript">
window.onload=function(){
var li=document.getElementsByTagName("li");//获取页面中所有的li元素
var t=[];//定义临时数组
for (var i=0;i<li.length;i++) {//遍历数组
var child=li[i].childNodes;//获取当前li的所有子节点
var b=false;//定义临时变量
for (var j=0;j<child.length;j++) {//遍历当前li元素包含的节点，并检测是否包含ul元素
if(child[j].nodeType==1&&child[j].nodeName.toLowerCase()=="ul"){
b=true;//如果li包含ul元素，则设置b为true
}
}
if(b){//如果li元素包含ul元素
li[i].style.cursor="pointer";//定义当前li元素的鼠标指针样式为手型
li[i].style.listStyleImage='url(../image/plus32.png)';//修改当前li元素的选项列表图形形状
var ul=li[i].getElementsByTagName("ul")[0];//获取li中第一个ul子元素
ul.style.display="none";//隐藏第一个ul子元素
t[i]=true;
li[i].onclick=(function(ul,li,i){
return function(e){//返回闭包函数
if(li==e.target||li==window.event.srcElement){//如果当前元素就是事件触发的目标对象，则允许执行。这样做的目的是防止单击当前li元素的子元素时，也触发click事件
if(t[i]){
ul.style.display="";//恢复显示ul元素
li.style.listStyleImage='url(../image/minus.jpg)';//修改li元素图形形状
t[i]=false;
}
else{
ul.style.display="none";
li.style.listStyleImage='url(../image/plus32.png)';
t[i]=true;
}
}
if(e && e.stopPropagation)//兼容非IE浏览器
e.stopPropagation();//阻止事件传播
else //兼容IE浏览器
window.event.cancelBubble=true;//阻止事件传播
return false;//避免触发默认事件
}
})(ul,li[i],i);
}
else{ //如果li不包含ul元素
li[i].style.cursor='default';//恢复li元素的鼠标默认样式
li[i].style.listStyleImage='none';
}
}
}
</script>
</head>
<body>
<ul class="tree">
<li>首页</li>
<li>新闻
<ul>
<li>国内新闻</li>
<li>国际新闻</li>
</ul>
</li>
<li>科技
<ul>
<li>桌面科技</li>
<li>移动科技
<ul>
<li>iPhone<br /></li>
<li>htc</li>
<li>android</li>
</ul>
</li>
<li>应用科技</li>
</ul>
</li>
<li>社会</li>
</ul>
</body>
</html>

0 0