我的菜单js如下
<SCRIPT language="JavaScript">
function display1(Q_subtree,Q_img){
if (Q_subtree.style.display=="none"){
Q_subtree.style.display="";
Q_img.src="images/tree_collapse.gif";
}
else
{
Q_subtree.style.display="none";
Q_img.src="images/tree_expand.gif";
}
}
</script>
<SCRIPT language="JavaScript">
function display1(Q_subtree,Q_img){
if (Q_subtree.style.display=="none"){
Q_subtree.style.display="";
Q_img.src="images/tree_collapse.gif";
}
else
{
Q_subtree.style.display="none";
Q_img.src="images/tree_expand.gif";
}
}
</script>
<TABLE width=86 border=0 cellPadding=0 cellSpacing=0 cols=5 bgcolor="#FF0000">
<TBODY>
<TR>
<TD style="line-height:16px" width=16></TD>
<TD style="line-height:16px" width=16></TD>
<TD style="line-height:16px" width=21></TD>
<TD style="line-height:16px" width="86"></TD>
</TR>
<TR>
<TD style="line-height:16px" width="16"><img src="images/tree_split.gif" width="16" height="16"></TD>
<TD style="line-height:16px" width="16"><SPAN id=zhugan1 style="CURSOR: hand;" onclick="javascript:display1(document.all.subtree1,document.all.img1);"><IMG src="images/tree_expand.gif" border=no name=img1 width="16" height="16"></SPAN></TD>
<TD style="line-height:16px" colSpan=2><a href="#">111</A></TD>
</TR>
<TR valign="top" id="subtree1" style="display:none">
<TD colspan=4 style="line-height:16px">
<TABLE cellSpacing=0 cols=5 cellPadding=0 width=100% border=0 >
<tbody>
<TR>
<TD style="line-height:16px" width="16"><img src="images/tree_vertline.gif" width="16" height="16" border=0></TD>
<TD style="line-height:16px" width="16"><IMG src="images/tree_split.gif" width="16" height="16"></TD>
<TD style="line-height:16px" width="15"><img src="images/tree_leaf.gif" border=0 width="16" height="16"></TD>
<TD style="line-height:16px"> <a href="#">aaa</A></TD>
</TR>
<TR>
<TD style="line-height:16px" width="16"><img src="images/tree_vertline.gif" width="16" height="16" border=0></TD>
<TD style="line-height:16px" width="16"><IMG src="images/tree_split.gif" width="16" height="16"></TD>
<TD style="line-height:16px" width="15"><img src="images/tree_leaf.gif" border=0 width="16" height="16"></TD>
<TD style="line-height:16px"> <a href="#">bbb</A></TD>
</TR>
<TR>
<TD style="line-height:16px" width="16"><img src="images/tree_vertline.gif" width="16" height="16" border=0></TD>
<TD style="line-height:16px" width="16"><IMG src="images/tree_split.gif" width="16" height="16"></TD>
<TD style="line-height:16px" width="15"><img src="images/tree_leaf.gif" width="16" height="16"></TD>
<TD style="line-height:16px"><a href="#">ccc</A></TD>
</TR>
</tbody>
</TABLE></TD>
</tr>
<TR>
<TD style="line-height:16px" width="16"><SPAN id=zhugan2 style="CURSOR: hand;" onclick="javascript:display1(document.all.subtree2,document.all.img2);"><IMG src="images/tree_expand.gif" border=no name=img2 width="16" height="16"></SPAN></TD>
<TD style="line-height:16px" colSpan=2><a href="#">222</A></TD>
</TR>
<TR valign="top" id="subtree2" style="display:none">
<TD colspan=4 style="line-height:16px"> <TABLE cellSpacing=0 cols=5 cellPadding=0 width=100% border=0 >
<tbody>
<TR>
<TD style="line-height:16px" width="16"><img src="images/tree_vertline.gif" border=0></TD>
<TD style="line-height:16px" width="16"><IMG src="images/tree_split.gif" width="16" height="16"></TD>
<TD style="line-height:16px" width="15"><img src="images/tree_leaf.gif" border=0 width="16" height="16"></TD>
<TD style="line-height:16px"><a href="#">AAA</A></TD>
</TR>
<TR>
<TD style="line-height:16px" width="16"><img src="images/tree_vertline.gif" border=0></TD>
<TD style="line-height:16px" width="16"><IMG src="images/tree_split.gif" width="16" height="16"></TD>
<TD style="line-height:16px" width="15"><img src="images/tree_leaf.gif" border=0 width="16" height="16"></TD>
<TD style="line-height:16px"><a href="#">BBB</A></TD>
</TR>
</tbody>
</TABLE></TD>
</TR>
<TR>
<TD style="line-height:16px" width="16"><img src="images/tree_split.gif" border=no width="16" height="16"></TD>
<TD style="line-height:16px" width="17"><SPAN id=zhugan3 style="CURSOR: hand;" onclick="javascript:display1(document.all.subtree3,document.all.img3);"><IMG src="images/tree_expand.gif" border=no name=img3 width="16" height="16"></SPAN></TD>
<TD style="line-height:16px" colSpan=2><a href="#">333</A></TD>
</TR>
<TR valign="top" id="subtree3" style="display:none">
<TD colspan=4 style="line-height:16px"> <TABLE cellSpacing=0 cols=5 cellPadding=0 width=100% border=0 >
<tbody>
<TR>
<TD style="line-height:16px" width="16"><img src="images/tree_vertline.gif" border=0></TD>
<TD style="line-height:16px" width="16"><IMG src="images/tree_split.gif" width="16" height="16"></TD>
<TD style="line-height:16px" width="15"><img src="images/tree_leaf.gif" border=0 width="16" height="16"></TD>
<TD style="line-height:16px"><a href="#">XXX</A></TD>
</TR>
<TR>
<TD style="line-height:16px" width="16"><img src="images/tree_vertline.gif" border=0></TD>
<TD style="line-height:16px" width="16"><IMG src="images/tree_split.gif" width="16" height="16"></TD>
<TD style="line-height:16px" width="15"><img src="images/tree_leaf.gif" border=0 width="16" height="16"></TD>
<TD style="line-height:16px"><a href="#">YYY</A></TD>
</TR>
</tbody>
</TABLE></TD>
</TR>
</Table>
var objSpan;
var lenSpan;
var objSrc;
var i;
var j;
var flag; flag = false; objOutTable = document.getElementsByTagName("table").item(0);
objSpan = objOutTable.getElementsByTagName("span");
lenSpan = objSpan.length; for( i= 0;i<lenSpan;i++){ j = objSpan.item(i).id.substring(6,objSpan.item(i).id.length);
objSrc = eval("subtree" + j) ; //alert ( " Q_subtree" + i + " : " + Q_subtree.id + " ");
//alert ( " objSrc" + i + " : " + objSrc.id + " " ); if (Q_subtree.style.display=="none"){ if(Q_subtree == objSrc ){
if( flag == false){
Q_subtree.style.display="";
Q_img.src="images/tree_collapse.gif";
flag = true;
}
}
else{
objSrc.style.display="none";
}
}
else{
if( flag == false){
Q_subtree.style.display="none";
Q_img.src="images/tree_expand.gif";
flag = true;
}
objSrc.style.display="none";
}
}
}
</script>