静态网页中如何在树菜单里 展开其中一个的同时，自动闭合其他的菜单

Question

我的菜单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>

Answer 1

菜单的表格
<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> 

Answer 2

<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="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>

Answer 3

function display1(Q_subtree,Q_img){ var objOutTable;
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>

Answer 4

谢谢了 但是用起来还是不行 >~<