樊代明院士的错误:求JS的树型菜单

来源:百度文库 编辑:中科新闻网 时间:2024/05/05 06:04:51
我需要一个树型的菜单,点击一个弹出子项,点击其他显示其他的子项但是别的子项收回,点击的主项有两个图片,当前展开的主项是一个图片,打开后变成另一个图片,求代码,谢谢

<tr>
<td align="center" class="images/LeftMenu_Title" onmouseover="LeftExtMenuOver(Img12)" style="CURSOR: hand" onclick="LeftExtMenuClick(Img12)" onmouseout="LeftExtMenuOut(Img12)" background="images/LeftMenu_TitleBG_Sub.gif" height="27" valign="bottom">主项1</td>
<td background="images/LeftMenu_Right.gif">
<img id="Img12" style="DISPLAY: none" height="27" src="images/LeftMenu_Right_Over.gif" width="7"></td>
</tr>
<tr style="DISPLAY: none" valign="top">
<td bgcolor="#e5e5e5" colspan="2">
<table cellspacing="0" cellpadding="0" width="168" border="0">
<tr>
<td width="161" height="5"></td>
<td width="7" height="2"><img height="1" src width="7"></td>
</tr>
<tr>
<td width="161" height="20">
<img height="23" src="images/Icon_ChildTree.gif" width="26" align="absMiddle" border="0">子项1</td>
<td width="7" background="images/LeftMenu_RightBG.gif" rowspan="5">
<img height="7" src="images/LeftMenu_RightBG.gif" width="7"></td>
</tr>
<tr>
<td height="20">
<img height="23" src="images/Icon_ChildTree.gif" width="26" align="absMiddle" border="0">子项2</td>
</tr>
<tr>
<td height="20">
<img height="23" src="images/Icon_ChildTree.gif" width="26" align="absMiddle" border="0">子项3</td>
</tr>
<tr>
<td height="20">
<img height="23" src="images/Icon_ChildTree.gif" width="26" align="absMiddle" border="0">子项4</td>
</tr>
<tr>
<td height="20">
<img height="23" src="images/Icon_ChildTree_End.gif" width="26" align="absMiddle" border="0">子项5</td>
</tr>
<tr>
<td background="images/LeftMenu_BottomBG.gif" height="5">
<img height="5" src="images/LeftMenu_BottomBG.gif" width="3"></td>
<td valign="top">
<img height="5" src="images/LeftMenu_RightCorner.gif" width="7"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="images/LeftMenu_Title" onmouseover="LeftExtMenuOver(Img15)" style="CURSOR: hand" onclick="LeftExtMenuClick(Img15)" onmouseout="LeftExtMenuOut(Img15)" background="images/LeftMenu_TitleBG_Sub.gif" height="27" valign="bottom">主项2</td>
<td background="images/LeftMenu_Right.gif">
<img id="Img15" style="DISPLAY: none" height="27" src="images/LeftMenu_Right_Over.gif" width="7"></td>
</tr>
<tr style="DISPLAY: none" valign="top">
<td bgcolor="#e5e5e5" colspan="2">
<table cellspacing="0" cellpadding="0" width="168" border="0">
<tr>
<td width="161" height="5"></td>
<td width="7" height="2"><img height="1" src width="7"></td>
</tr>
<tr>
<td width="161" height="20" align="center">子项</td>
<td width="7" background="images/LeftMenu_RightBG.gif" rowspan="1">
<img height="7" src="images/LeftMenu_RightBG.gif" width="7"></td>
</tr>
<tr>
<td background="images/LeftMenu_BottomBG.gif" height="5">
<img height="5" src="images/LeftMenu_BottomBG.gif" width="3"></td>
<td valign="top">
<img height="5" src="images/LeftMenu_RightCorner.gif" width="7"></td>
</tr>
</table>
</td>
</tr>
<script language="JavaScript">
var LastClick=-1;
var LastImg="";
var LastTD="";
var L_RightImgOpen=new Image();
var L_RightImgOver=new Image();
var L_TitleBG_Open=new Image();
var L_TitleBG_OpenURL=new Image();

L_RightImgOpen="images/LeftMenu_Right_Open.gif";

L_RightImgOver="images/LeftMenu_Right_Over.gif";

L_TitleBG_OpenURL="images/LeftMenu_TitleBG_Open.gif";

function LeftExtMenuClick(ImgName)
{
var objTR=event.srcElement.parentElement;
var objTD=event.srcElement;
var SelectIndex = objTR.rowIndex;
var objStyle=objTR.parentElement.rows[SelectIndex+1].style;

if (objStyle.display=="none")
{
if(LastClick!=-1){
LeftExtMenuClose(LastTD,LastClick,LastImg)
} //关闭之前的菜单
LeftExtMenuOpen(objTD,SelectIndex,ImgName)
}else{
LeftExtMenuClose(objTD,SelectIndex,ImgName)
}
LastClick=SelectIndex;
LastImg=ImgName;
LastTD=objTD; //记录现在打开的菜单参数,为下次关闭该菜单传递参数
}

function LeftExtMenuOpen(objName,CurrIndex,RightImg)
{
RightImg.src=L_RightImgOpen;
RightImg.style.display="";
objName.style.backgroundImage="url(images/LeftMenu_TitleBG_Open.gif)";
objName.parentElement.parentElement.rows[CurrIndex+1].style.display = "";
}

function LeftExtMenuClose(objName,CurrIndex,RightImg)
{
RightImg.src=L_RightImgOver;
RightImg.style.display="none";
objName.style.backgroundImage="url(images/LeftMenu_TitleBG_Sub.gif)";
objName.parentElement.parentElement.rows[CurrIndex+1].style.display = "none";
}

//初始化菜单
function LeftMenuInit(CurrIndex)
{
var ImgName=document.all("Img"+CurrIndex);
var objTD=LeftTB.rows[CurrIndex].cells[0];

ImgName.src=L_RightImgOpen;
ImgName.style.display="";
objTD.style.backgroundImage="url(images/LeftMenu_TitleBG_Open.gif)";
LeftTB.rows[CurrIndex+1].style.display="";
LastClick=CurrIndex;
LastTD=objTD;
LastImg=ImgName;
}

function LeftExtMenuOver(RightImg)
{
var objTR=event.srcElement.parentElement;
for(var i=1;i<3;i++)
{
if(objTR.tagName!="TR"){objTR=objTR.parentElement;}
}
var SelectIndex = objTR.rowIndex;
var objStyle=objTR.parentElement.parentElement.rows[SelectIndex+1].style;

if ((objStyle.display=="block")||(objStyle.display=="")){}
else
{RightImg.style.display="";}
}
function LeftExtMenuOut(RightImg)
{
var objTR=event.srcElement.parentElement;
for(var i=1;i<3;i++)
{
if(objTR.tagName!="TR"){objTR=objTR.parentElement;}
}
var SelectIndex = objTR.rowIndex;
var objStyle=objTR.parentElement.rows[SelectIndex+1].style;

if ((objStyle.display=="block")||(objStyle.display=="")){}
else
{RightImg.style.display="none";}
}
</script>