树形菜单问题

推荐一个jqeury ui pluging/treeTable：
http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html#settings

解决方案 »

  1.   

    这是我以前使用成功的  你把里面的改为从数据库取出的就行了<%@ page language="java"  pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>tree menu by jiarry</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script language="JavaScript" type="text/JavaScript">
    <!--//made by jiarry.126.com Aug.27 2004
    function showhide_obj(obj,icon)
    {
    obj=document.getElementById(obj);
    icon=document.getElementById(icon);
    //objStr=obj.toString(); 
    //alert(objStr)
    /*objStr=2;
    a=objStr.toString()+5;
    b=objStr+5
    alert(a);alert(b);
    */ 
      if (obj.style.display=="none") 
      { 
        //div_list = document.all.tags("div"); //指定文档中的对象为div,仅适用于IE;   
        div_list = document.getElementsByTagName("div");
        for (i=0; i< div_list.length; i ++) {
          thisDiv = div_list[i]; 
       if(thisDiv.id.indexOf("title")!=-1)//当文档div中的id含有list时,与charAt类似;
       {
       //if(obj.id!=obj)//该div 的id又非选中的obj,设置该div的style为none
       //{
       thisDiv.style.display="none";//循环吧所有菜单链接都隐藏起来
      // }
       }
     } 
     
     
        //myfont=document.all.tags("font");
       myfont=document.getElementsByTagName("font");
       for(i=0;i<myfont.length;i++)
        {
        thisfont = myfont[i];
        if(thisfont.id.indexOf("icon")!=-1 && icon.id!=icon)
        {   
        //alert(thisfont.id)
        //thisfont.innerHTML="+";
         }
       }
        //icon.innerHTML="-";
        obj.style.display=""; //只显示当前链接
    }
     else
      {//假如当前对象是打开的，就关闭它;
       //icon.innerHTML="+";
       obj.style.display="none";
       }
     }function set_initialization(obj,img)
    {//设置初始状态,打开一个层;
       obj.style.display="";
       img.src="images/icon/minus.gif";
       }function show_this(obj)
    {
    obj=document.getElementById(obj);
    if (obj.id==obj.id) 
     {
     //alert(obj.id)
       //blinkicon=document.all.tags("font"); 
       blinkicon=document.getElementsByTagName("font");
       for(x=0;x<blinkicon.length;x++)
        {
        if( blinkicon[x].id.indexOf("select")!=-1 && obj.id!=obj )
          {
           blinkicon[x].innerHTML=" ";
          }
        }
          obj.innerHTML="&gt;"; 
     }
     else
     {
           obj.innerHTML=" ";
     }
    }
    //-->
    </script>
    <style type="text/css">
    span{ width:100px;Height:25px;margin-left:15px;}
    font{font-weight:bold;}
    body,td{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;color:#333333;}
    div{cursor:default;border-top:1px solid gray ; border-left:1px solid gray ;border-right:1px solid gray ;background-color:#D3F7FE ;width:120px;}
    pre{background-color:#FFFFF1; border:1px solid gray;color:blue;font-family:verdana;Arial;padding:20px;}
    </style>
    </head><body>
    <p> </p>
    <p> </p>
    <div style="line-height:25px;" onClick="showhide_obj('title1','icon1')"><font id='icon1'>+</font>栏目一</div>
    <div id="title1"  style="background-color:#fffff3;line-height:22px;display:none;">
    <span id=menu1_1 onMouseOver="this.style.backgroundColor='blue'" onMouseOut="this.style.backgroundColor=''" onclick="show_this('select1_1')"><font id='select1_1'></font>菜单一</span></font><br />
    <span id="menu1_2" onclick="show_this('select1_2')"><font id='select1_2'></font>菜单二</span></font><br />
    <span id="menu1_3" onclick="show_this('select1_3')"><font id='select1_3'></font>菜单三</span></font><br />
    </div>
    <div style="line-height:25px;" onClick="showhide_obj('title2','icon2')"><font id='icon2'>+</font>栏目二</div>
    <div id="title2" style="background-color:#fffff3;line-height:22px;display:none;">
    <span id="menu2_1" onclick="show_this('select2_1')"><font id='select2_1'></font>菜单一</span></font><br />
    <span id="menu2_2" onclick="show_this('select2_2')"><font id='select2_2'></font>菜单二</span></font><br />
    <span id="menu2_3" onclick="show_this('select2_3')"><font id='select2_3'></font>菜单三</span></font><br />
    </div>
    <div style="line-height:25px;" onClick="showhide_obj('title3','icon3')"><font id='icon3'>+</font>栏目三</div>
    <div id="title3" style="background-color:#fffff3;line-height:22px;display:none;">
    <span id=menu3_1 onclick="show_this('select3_1')"><font id='select3_1'></font>菜单一</span></font><br />
    <span id=menu3_2 onclick="show_this('select3_2')"><font id='select3_2'></font>菜单二</span></font><br />
    <span id=menu3_3 onclick="show_this('select3_3')"><font id='select3_3'></font>菜单三</span></font><br />
    </div>
    <div style="line-height:25px;" onClick="showhide_obj('title4','icon4')"><font id='icon4'>+</font>栏目四</div>
    <div id="title4" style="background-color:#fffff3;line-height:22px;display:none;">
    <span id=menu4_1 onclick="show_this('select4_1')"><font id='select4_1'></font>菜单一</span></font><br />
    <span id=menu4_2 onclick="show_this('select4_2')"><font id='select4_2'></font>菜单二</span></font><br />
    <span id=menu4_3 onclick="show_this('select4_3')"><font id='select4_3'></font>菜单三</span></font><br />
    <span id=menu4_4 onclick="show_this('select4_4')"><font id='select4_4'></font>菜单三</span></font><br />
    <span id=menu4_5 onclick="show_this('select4_5')"><font id='select4_5'></font>菜单三</span></font><br />
    <span id=menu4_6 onclick="show_this('select4_6')"><font id='select4_6'></font>菜单三</span></font><br />
    </div></body>
    </html>
      

  2.   

    有一个叫dTree的js类 搜一下