今天要做一个目录树。
为了节省空间，要求点击了一个后，其他打开的要自动合拢。
要不然就不用自己写了，现成的多的是。
下载：tree.rar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dd</title>
<style type="text/css">
<!--
.tree1j {
margin-left: 10px;
}
.tree2j {
margin-left: 20px;
}
.tree3j {
margin-left: 30px;
}
-->
</style>
<script type="text/javascript">
function div_close(div_id)
{
//获取元素是否存在
var objdiv= document.getElementById(div_id);
if(objdiv==null)
{
return false;
}
var divimg=document.getElementById(div_id+'_img');
if(divimg!=null)
{
divimg.src='+.jpg';
}
//循环关闭子元素
for(i=1;i<100;i++)
{
var childdiv=document.getElementById(div_id+'_'+i);
if(childdiv==null)
{
break;
}
else
{
childdiv.style.display="none";
}
}
}
function div_show(div_id)
{
//获取元素是否存在
var objdiv= document.getElementById(div_id);
if(objdiv==null)
{
return false;
}
//是否需要更换图标
var tocimg=true;
//循环打开关闭子元素
for(i=1;i<100;i++)
{
var childdiv=document.getElementById(div_id+'_'+i);
if(childdiv==null)
{
break;
}
else
{
if(childdiv.style.display=="none")
{
childdiv.style.display="block"
}
else
{
childdiv.style.display="none";
}
}
//变幻图标
if(i>1&&tocimg)
{
tocimg=false;
var divimg=document.getElementById(div_id+'_img');
if(divimg!=null)
{
if(divimg.src.indexOf('+.jpg')>-1) {divimg.src='-.jpg';} else{divimg.src='+.jpg'; }
}
}
}
//关闭同级元素
var endindex= div_id.lastIndexOf('_');
var custr=div_id.substring(0,endindex);
for(j=1;j<100;j++)
{
var cudiv=document.getElementById(custr+'_'+j);
if(cudiv==null)
{
break;
}
else
{
if((custr+'_'+j)==div_id)
{
continue;
}
div_close(custr+'_'+j);
}
}
}
</script>
</head>
<body>
<div id="tree">
<div id="tree_1" class="tree1j"><img id="tree_1_img" src="+.jpg" onclick="div_show('tree_1');"; />tree_1
<div id="tree_1_1" style="display:none;" class="tree2j">
<img id="tree_1_1_img" src="+.jpg" onclick="div_show('tree_1_1');"; />
tree_1_1
<div id="tree_1_1_1" style="display:none;" class="tree3j">tree_1_1_1</div>
<div id="tree_1_1_2" style="display:none;" class="tree3j">tree_1_1_2</div>
</div>
<div id="tree_1_2" style="display:none;" class="tree2j">tree_1_2</div>
<div id="tree_1_3" style="display:none;" class="tree2j">tree_1_3</div>
</div>
<div id="tree_2" class="tree1j">
<img id="tree_2_img" src="+.jpg" onclick="div_show('tree_2');"; />
tree_2
<div id="tree_2_1" style="display:none;" class="tree2j">tree_1_1</div>
<div id="tree_2_2" style="display:none;" class="tree2j">tree_1_2</div>
<div id="tree_2_3" style="display:none;" class="tree2j">tree_1_3</div>
</div>
<div id="tree_3" class="tree1j">
<img id="tree_3_img" src="+.jpg" onclick="div_show('tree_3');"; />
tree_3
<div id="tree_3_1" style="display:none;" class="tree2j">tree_1_1</div>
<div id="tree_3_2" style="display:none;" class="tree2j">tree_1_2</div>
<div id="tree_3_3" style="display:none;" class="tree2j">tree_1_3</div>
</div>
<div id="tree_4" class="tree1j">tree_4</div>
</div>
<input id="Button1" type="button" value="全部" onclick="div_show('tree')" />
</body>
</html>