使用JS收起和弹出树菜单

在我的一个项目中,本人使用了一批可以收起并弹出的树菜单,这里拿出来和大家交流一下.

这里主要运用了Ul,li实现树菜单和JavaScript的动态修改节点风格的方法.

没有什么多说的了,直接列出代码吧,凡是我觉得比较重要的地方都给加重了一下.

<script language=javascript>
  function expandShrinkCaseFromMe(){
    // 用户点击的图片单元格
    var elm=document.getElementById('expandShrinkCaseFromMeImg');
   
    // 用户点击的图片
    var images=elm.getElementsByTagName("IMG");
   
    // 数据树
    var datumTree=document.getElementById('expandShrinkCaseFromMeTree');
   
    if(images[0].src.indexOf("allExpand")!=-1){
      // 展开树
      images[0].src='../images/allShrink.jpg';
      datumTree.style.display="block";
    }
    else{
      // 收起树
      images[0].src='../images/allExpand.jpg';
      datumTree.style.display="none";
    }
  }
  //οnmοuseοver="this.style.border='1'" οnmοuseοut="this.style.border='0'" 
</script>

<TABLE border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#ccccd4">
  <TR height=20> 
    <TD bgcolor="#ccccd4" align=left valign=center>
      <TABLE border="0" width="100%" height=100%  align=left valign=center>
        <tr>
          <td align=right><img width=1></td>
          <td align=left><html:link page="/EnterProjectPageAction.do?Action=casefromme"><B>我提出的任务</B></html:link></td>
   <%--点击的处理在此--%>
          <td align=right id="expandShrinkCaseFromMeImg" width=16 align=center valign=center><IMG src="../images/allShrink.jpg" οnclick="expandShrinkCaseFromMe()"></td>         
        </tr>
      </TABLE>
    </TD>
  </TR>
 
  <TR>
    <TD bgcolor="#f2f3f7">
      <%--菜单在此--%>
      <ul class="tree" id="expandShrinkCaseFromMeTree" style="display:block">            
        <logic:iterate indexId="index" id="element" name="CaseFromMe"> 
          <li>
            <bean:define id="Id" name="element" property="id"/>        
            &nbsp;&nbsp;&nbsp;<IMG src="../images/arrow.gif">
            <html:link page="/EnterHandleProjectAction.do?Action=enter" paramId="Id" paramName="Id">
              <bean:write name="element" property="title"/>
            </html:link> 
          </li>      
        </logic:iterate>
      </ul>  
    </TD>
  </TR>
</TABLE>

为帮助理解,贴上展开和收起的效果图:
展开效果图:

http://foto.yculblog.com/junglesong/expand.jpg
收起效果图: