改了几个名字
大类的ID用DV+3个字符表示
中类的ID用DV+4个字符表示
小类的ID用DV+5个字符表示
约定好之后就可以用下面这段代码:
------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Tree</title>
<script language="javascript">
var display="none";
function show(IMG,DV,Big)
{ if(DV.style.display=="none")
{
if(Big==1)
{
display="block";
showall();
}
else{//如果不是第一级
closemenu(DV.id.length);//关掉平级的(根据你命名的规律)
} DV.style.display="block";
IMG.src="images/btnDel.gif"
}
else
{
DV.style.display="none";
IMG.src="images/btnAdd.gif"
}
}
var i;
function closemenu(len){
var divTags=document.getElementsByTagName("div");
for(i=0;i<divTags.length;i++)
{
if(divTags[i].id.length==len){//如果是平级的菜单,则关掉所有平级的菜单
divTags[i].style.display="none";
eval("IMG"+divTags[i].id.replace("DV","")).src="images/btnAdd.gif";
}
}
}
function showall()
{
var divTags=document.getElementsByTagName("div");
//alert(divTags[10].id.replace("DV",""));
if(display=="none")
{
for(i=0;i<divTags.length;i++)
{
divTags[i].style.display="block";
eval("IMG"+divTags[i].id.replace("DV","")).src="images/btnDel.gif";
display="block"
}
}
else
{
for(i=0;i<divTags.length;i++)
{
divTags[i].style.display="none";
eval("IMG"+divTags[i].id.replace("DV","")).src="images/btnAdd.gif";
display="none";
}
}
}
</script>
</head><body><table border="1" width="760" height="400">
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> <table width="90%" border="1" align="left" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr align="center" onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
<td width="*" bgcolor="#EEEEEE"><a href="#" ONCLICK='showall()'>打开</a> <a href="#" ONCLICK='showall()'>关闭</a>
</td>
</tr>
</table> <p> </p>
<table width="45%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr align="center" ONCLICK="show(IMG001,DV001,1)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
<td width="16" scope="row"><img id="IMG001" src="images/btnAdd.gif"></td>
<td width="*" bgcolor="#EEEEEE">大类1</td>
</tr>
</table>
<!--Begin of 2-->
<DIV id='DV001' style='display:none'>
<table style="margin-left:20px;" width="65%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr align="center" ONCLICK="show(IMG0010,DV0010,0)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
<td width="16"><img id="IMG0010" src="images/btnAdd.gif"></td>
<td width="*" bgcolor="#EEEEEE">中类1</td>
</tr>
</table>
<!--Begin of 3-->
<DIV id="DV0010" style='display:none'>
<table style="margin-left:40px;" width="75%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'" align="center">
<td width="16" bgcolor="#eeeeee"><img id="IMG00101" src="images/btnAdd.gif"></td>
<td width="*" bgcolor="#eeeeee">小类1</td>
</tr>
</table> </DIV><!--End of 3-->
<table style="margin-left:20px;" width="65%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr align="center" ONCLICK="show(IMG0020,DV0020,0)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
<td width="16"><img id="IMG0020" src="images/btnAdd.gif"></td>
<td width="*" bgcolor="#EEEEEE"> 中类12</td>
</tr>
</table>
<DIV id="DV0020" style='display:none'>
<table style="margin-left:40px;" width="75%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'" align="center">
<td width="16" bgcolor="#eeeeee"><img id="IMG00201" src="images/btnAdd.gif"></td>
<td width="*" bgcolor="#eeeeee">小类12</td>
</tr>
</table> </DIV><!--End of 3--> </DIV><!--End of 2-->
<p> </p>
<table width="45%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr align="center" ONCLICK="show(IMG002,DV002,1)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
<td width="16" scope="row"><img id="IMG002" src="images/btnAdd.gif"></th>
<td width="*" bgcolor="#EEEEEE">大类2</td>
</tr>
</table>
<!--Begin of 2-->
<DIV id='DV002' style='display:none'>
<table style="margin-left:20px;" width="65%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr align="center" ONCLICK="show(IMG0021,DV0021,0)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
<td width="16"><img id="IMG0021" src="images/btnAdd.gif"></td>
<td width="*" bgcolor="#EEEEEE"> 中类2</td>
</tr>
</table>
<!--Begin of 3-->
<DIV id="DV0021" style='display:none'>
<table style="margin-left:40px;" width="75%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'" align="center">
<td width="16" bgcolor="#eeeeee"><img id="IMG00211" src="images/btnAdd.gif"></td>
<td width="*" bgcolor="#eeeeee">小类2</td>
</tr>
</table>
</DIV><!--End of 3--> </DIV><!--End of 2-->
</td>
</tr>
</table></body>
</html>
大类的ID用DV+3个字符表示
中类的ID用DV+4个字符表示
小类的ID用DV+5个字符表示
约定好之后就可以用下面这段代码:
------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Tree</title>
<script language="javascript">
var display="none";
function show(IMG,DV,Big)
{ if(DV.style.display=="none")
{
if(Big==1)
{
display="block";
showall();
}
else{//如果不是第一级
closemenu(DV.id.length);//关掉平级的(根据你命名的规律)
} DV.style.display="block";
IMG.src="images/btnDel.gif"
}
else
{
DV.style.display="none";
IMG.src="images/btnAdd.gif"
}
}
var i;
function closemenu(len){
var divTags=document.getElementsByTagName("div");
for(i=0;i<divTags.length;i++)
{
if(divTags[i].id.length==len){//如果是平级的菜单,则关掉所有平级的菜单
divTags[i].style.display="none";
eval("IMG"+divTags[i].id.replace("DV","")).src="images/btnAdd.gif";
}
}
}
function showall()
{
var divTags=document.getElementsByTagName("div");
//alert(divTags[10].id.replace("DV",""));
if(display=="none")
{
for(i=0;i<divTags.length;i++)
{
divTags[i].style.display="block";
eval("IMG"+divTags[i].id.replace("DV","")).src="images/btnDel.gif";
display="block"
}
}
else
{
for(i=0;i<divTags.length;i++)
{
divTags[i].style.display="none";
eval("IMG"+divTags[i].id.replace("DV","")).src="images/btnAdd.gif";
display="none";
}
}
}
</script>
</head><body><table border="1" width="760" height="400">
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> <table width="90%" border="1" align="left" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr align="center" onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
<td width="*" bgcolor="#EEEEEE"><a href="#" ONCLICK='showall()'>打开</a> <a href="#" ONCLICK='showall()'>关闭</a>
</td>
</tr>
</table> <p> </p>
<table width="45%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr align="center" ONCLICK="show(IMG001,DV001,1)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
<td width="16" scope="row"><img id="IMG001" src="images/btnAdd.gif"></td>
<td width="*" bgcolor="#EEEEEE">大类1</td>
</tr>
</table>
<!--Begin of 2-->
<DIV id='DV001' style='display:none'>
<table style="margin-left:20px;" width="65%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr align="center" ONCLICK="show(IMG0010,DV0010,0)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
<td width="16"><img id="IMG0010" src="images/btnAdd.gif"></td>
<td width="*" bgcolor="#EEEEEE">中类1</td>
</tr>
</table>
<!--Begin of 3-->
<DIV id="DV0010" style='display:none'>
<table style="margin-left:40px;" width="75%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'" align="center">
<td width="16" bgcolor="#eeeeee"><img id="IMG00101" src="images/btnAdd.gif"></td>
<td width="*" bgcolor="#eeeeee">小类1</td>
</tr>
</table> </DIV><!--End of 3-->
<table style="margin-left:20px;" width="65%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr align="center" ONCLICK="show(IMG0020,DV0020,0)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
<td width="16"><img id="IMG0020" src="images/btnAdd.gif"></td>
<td width="*" bgcolor="#EEEEEE"> 中类12</td>
</tr>
</table>
<DIV id="DV0020" style='display:none'>
<table style="margin-left:40px;" width="75%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'" align="center">
<td width="16" bgcolor="#eeeeee"><img id="IMG00201" src="images/btnAdd.gif"></td>
<td width="*" bgcolor="#eeeeee">小类12</td>
</tr>
</table> </DIV><!--End of 3--> </DIV><!--End of 2-->
<p> </p>
<table width="45%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr align="center" ONCLICK="show(IMG002,DV002,1)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
<td width="16" scope="row"><img id="IMG002" src="images/btnAdd.gif"></th>
<td width="*" bgcolor="#EEEEEE">大类2</td>
</tr>
</table>
<!--Begin of 2-->
<DIV id='DV002' style='display:none'>
<table style="margin-left:20px;" width="65%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr align="center" ONCLICK="show(IMG0021,DV0021,0)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
<td width="16"><img id="IMG0021" src="images/btnAdd.gif"></td>
<td width="*" bgcolor="#EEEEEE"> 中类2</td>
</tr>
</table>
<!--Begin of 3-->
<DIV id="DV0021" style='display:none'>
<table style="margin-left:40px;" width="75%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
<tr STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'" align="center">
<td width="16" bgcolor="#eeeeee"><img id="IMG00211" src="images/btnAdd.gif"></td>
<td width="*" bgcolor="#eeeeee">小类2</td>
</tr>
</table>
</DIV><!--End of 3--> </DIV><!--End of 2-->
</td>
</tr>
</table></body>
</html>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货