树状侧边菜单栏示例

树状侧边菜单栏示例

示例图片：


控制代码：

<% @ page contentType="text/html; charset=UTF-8" %>
<%  
    String ulId=request.getParameter("ulId");
    if(ulId==null){
        ulId="poems";
    }
%>
<!--  链接导航部分  -->
< ul >
     < li >     
     <%  
        if( ulId.equals("poems")){
            out.print("<img src='web/img/openedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">诗歌</a>");
            out.print("<ul id='poems' style='display:block'>");
        }
        else{
            out.print("<img src='web/img/closedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">诗歌</a>");
            out.print("<ul id='poems' style='display:none'>");
        }
     %>         
             < li >< img  src ="web/img/join.gif" />< a  href ="ShowPage?page=index&&ulId=poems&&aid=1" > 春歌 </ a ></ li >
             < li >< img  src ="web/img/join.gif" />< a  href ="ShowPage?page=index&&ulId=poems&&aid=3" > 侠客行 </ a ></ li >
             < li >< img  src ="web/img/join.gif" />< a  href ="ShowPage?page=index&&ulId=poems&&aid=4" > 南陵别儿童入京 </ a ></ li >
             < li >< img  src ="web/img/joinbottom.gif" />< a  href ="ShowPage?page=index&&ulId=poems&&aid=16" > 忆昔开元全盛日 </ a ></ li >
         </ ul >
     </ li >
     < li >
     <%  
        if( ulId.equals("logions")){
            out.print("<img src='web/img/openedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">名言</a>");
            out.print("<ul id='logions' style='display:block'>");
        }
        else{
            out.print("<img src='web/img/closedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">名言</a>");
            out.print("<ul id='logions' style='display:none'>");
        }
     %>     
         < li >< img  src ="web/img/join.gif" />< a  href ="ShowPage?page=index&&ulId=logions&&aid=6" > 择善人而交 </ a ></ li >
         < li >< img  src ="web/img/join.gif" />< a  href ="ShowPage?page=index&&ulId=logions&&aid=7" > 处事不必求功 </ a ></ li >
         < li >< img  src ="web/img/join.gif" />< a  href ="ShowPage?page=index&&ulId=logions&&aid=8" > 多躁者必无沉毅之识 </ a ></ li >
         < li >< img  src ="web/img/join.gif" />< a  href ="ShowPage?page=index&&ulId=logions&&aid=9" > 盘根错节 </ a ></ li >
         < li >< img  src ="web/img/joinbottom.gif" />< a  href ="ShowPage?page=index&&ulId=logions&&aid=10" > 人遇逆境 </ a ></ li >
         </ ul >
     </ li >
     < li >
     <%  
        if( ulId.equals("couplets")){
            out.print("<img src='web/img/openedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">对联</a>");
            out.print("<ul id='couplets' style='display:block'>");
        }
        else{
            out.print("<img src='web/img/closedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">对联</a>");
            out.print("<ul id='couplets' style='display:none'>");
        }
     %>
             < li >< img  src ="web/img/join.gif" />< a  href ="ShowPage?page=index&&ulId=couplets&&aid=2" > 天地会 </ a ></ li >
             < li >< img  src ="web/img/joinbottom.gif" />< a  href ="ShowPage?page=index&&ulId=couplets&&aid=5" > 上国衣冠 </ a ></ li >
         </ ul >
     </ li >
     < li >
     <%  
        if( ulId.equals("zens")){
            out.print("<img src='web/img/openedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">禅语</a>");
            out.print("<ul id='zens' style='display:block'>");
        }
        else{
            out.print("<img src='web/img/closedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">禅语</a>");
            out.print("<ul id='zens' style='display:none'>");
        }
     %>
             < li >< img  src ="web/img/join.gif" />< a  href ="ShowPage?page=index&&ulId=zens&&aid=11" > 智者知幻即离 </ a ></ li >
             < li >< img  src ="web/img/join.gif" />< a  href ="ShowPage?page=index&&ulId=zens&&aid=12" > 世间有为法 </ a ></ li >
             < li >< img  src ="web/img/joinbottom.gif" />< a  href ="ShowPage?page=index&&ulId=zens&&aid=13" > 菩提本非树 </ a ></ li >
         </ ul >
     </ li >
     < li >
     <%  
        if( ulId.equals("knowledges")){
            out.print("<img src='web/img/openedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">知识</a>");
            out.print("<ul id='knowledges' style='display:block'>");
        }
        else{
            out.print("<img src='web/img/closedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">知识</a>");
            out.print("<ul id='knowledges' style='display:none'>");
        }
     %>
             < li >< img  src ="web/img/join.gif" />< a  href ="ShowPage?page=index&&ulId=knowledges&&aid=14" > 博学审问 </ a ></ li >
             < li >< img  src ="web/img/joinbottom.gif" />< a  href ="ShowPage?page=index&&ulId=knowledges&&aid=15" > 坐而论道 </ a ></ li >
         </ ul >
     </ li >
     < li >
     <%  
        if( ulId.equals("weij")){
            out.print("<img src='web/img/openedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">魏晋风度</a>");
            out.print("<ul  id='weij' style='display:block'>");
        }
        else{
            out.print("<img src='web/img/closedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">魏晋风度</a>");
            out.print("<ul  id='weij' style='display:none'>");
        }
     %>
             < li >< img  src ="web/img/join.gif" />< a  href ="ShowPage?page=index&&ulId=weij&&aid=17" > 观棋柯烂,伐木丁丁 </ a ></ li >
             < li >< img  src ="web/img/joinbottom.gif" />< a  href ="ShowPage?page=index&&ulId=weij&&aid=18" > 乘兴而行兴尽而返 </ a ></ li >
         </ ul >
     </ li >
</ ul >


<!--  SCRIPT部分  -->
< SCRIPT  LANGUAGE ="JavaScript" >
<!--
var openedImgSrc="web/img/openedfolder.gif";
var closedImgSrc="web/img/closedfolder.gif";

function openCloseSubTree(img){
    // 获得图片节点的图片属性    
    var imgSrc=img.getAttribute("src");
    
    // 图片节点的下两个节点为无序列表节点    
    var ul=img.nextSibling.nextSibling;
    
    if(imgSrc.indexOf(openedImgSrc)!=-1){
        // 关闭子项
        img.setAttribute("src",closedImgSrc);
        ul.style.display="none";
    }
    else if(imgSrc.indexOf(closedImgSrc)!=-1){
        // 展开子项
        img.setAttribute("src",openedImgSrc);
        ul.style.display="block";
    }
}

function openCloseSubTree2(link){
    // 获得图片节点
    var img=link.previousSibling;

    // 获得图片节点的图片属性    
    var imgSrc=img.getAttribute("src");
    
    // 图片节点的下两个节点为无序列表节点    
    var ul=link.nextSibling;
    
    if(imgSrc.indexOf(openedImgSrc)!=-1){
        // 关闭子项
        img.setAttribute("src",closedImgSrc);
        ul.style.display="none";
    }
    else if(imgSrc.indexOf(closedImgSrc)!=-1){
        // 展开子项
        img.setAttribute("src",openedImgSrc);
        ul.style.display="block";
    }
}
//-->
</ SCRIPT >

代码下载：
http://www.blogjava.net/Files/sitinspring/TreeSideBar20081026165235.rar