jQuery 无限级菜单

说是无限级，当然只是理论上的，如果有无限长度的颜色列表，无限长度目录树，无限的CPU资源……

我将CSS完全分离出来用jQuery附加式样，就是为了多级染色，并且生成目录树和控制式样也很容易，生成时也不需要考虑式样。数据表建议用事先Order排序的方式，不要读取数据的时候才分级排序，这样性能会较佳。

我把它做成了个.Net的控件，作为轻量级的无限目录树，还是相当好用的。只是还不完善，我先慢慢修改，等差不多了再发布出来。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  id ="Head1"  runat ="server" >
     < title > jQuery 无限级菜单 </ title >
     < style  type ="text/css" >
    #menu a  {
        color : #fff ;
     }
    #menu div  {
         /*  text-align:center;  */
     }
    #menu div a  {
        padding-left : 20px ;
     }
    #menu div.root  {
        display : block ;
     }
    .list  {  background : url(list.gif) no-repeat 6px 6px ;   }
     </ style >
     < script  type ="text/javascript"  language ="javascript"  src ="jquery-1.2.3.min.js" ></ script >
     < script  type ="text/javascript"  language ="javascript" >
    $( function (){
         // 颜色列表，如果想支持无限级，最好自动生成颜色列表，不过我的配色一项很差，用生成的就更惨不忍睹了……
        _cor  =  [ ' #003366 ' ,  ' #0066CC ' ,  ' #3399FF ' ,  ' #990000 ' ,  ' #CC0000 ' ,  ' #FF3300 ' ,  ' #FF9900 ' ,  ' #FFCC66 ' ,  ' #FFFFFF ' ];
         // 初始化类
        ( function  Init(i,obj){
            i ++ ;
             // 查找子节点
            _obj  =  obj.children( ' div ' );
             // 若有子节点，则增加一个专有式样
             if  (_obj.length  >   0 )
                obj.addClass( ' list ' );
            $.each(_obj,  function (j,o){
                 // 若是子目录则隐藏
                 if  (i  >   0 )
                    $(o).hide();
                 // 根据目录级数查找颜色字典上背景色，可改为图片什么的。
                $(o).css( ' background-color ' ,_cor[i]);
                 // 查找子目录
                Init(i,$(o));
            });
        })( - 1 ,$( ' #menu ' ));
    });
     // 跳转链接
     function  GotoURL(obj) {
         // 若链接最末一位不是符号“#”则跳转链接，因为取href得到链接绝对路径，所以只能取最后一位，其实可以传值判断或生成目录树时不产生onclick都是可以的
         if  (obj.href.substring(obj.href.length  -   1 , obj.href.length)  !=   " # " )  return   true ;
         // 拉出和缩进的特效
        $.each($(obj).parent().children( ' div ' ),  function (i,o){
            $(o).slideToggle( ' slow ' );
        });
         return   false ;
    }
     </ script >
</ head >
< body >

     < div  id ="menu" >
         < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第一级 </ a >   </ div >
         < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第一级 </ a >
             < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第二级 </ a >   </ div >
             < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第二级 </ a >
                 < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第三级 </ a >
                     < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第四级 </ a >   </ div >
                     < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第四级 </ a >   </ div >
                 </ div >
                 < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第三级 </ a >
                     < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第四级 </ a >   </ div >
                     < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第四级 </ a >
                         < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第五级 </ a >   </ div >
                         < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第五级 </ a >   </ div >
                         < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第五级 </ a >
                             < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第六级 </ a >   </ div >
                             < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第六级 </ a >   </ div >
                         </ div >
                     </ div >
                 </ div >
             </ div >
             < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第二级 </ a >   </ div >
         </ div >
         < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第一级 </ a >
             < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第二级 </ a >   </ div >
             < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第二级 </ a >   </ div >
             < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第二级 </ a >
                 < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第三级 </ a >
                     < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第四级 </ a >   </ div >
                     < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第四级 </ a >   </ div >
                 </ div >
                 < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第三级 </ a >
                     < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第四级 </ a >   </ div >
                     < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第四级 </ a >
                         < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第五级 </ a >   </ div >
                         < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第五级 </ a >   </ div >
                         < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第五级 </ a >
                             < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第六级 </ a >   </ div >
                             < div >   < a  href ="#"  onclick ="return GotoURL(this)" > 第六级 </ a >   </ div >
                         </ div >
                     </ div >
                 </ div >
             </ div >
         </ div >
     </ div >

</ body >
</ html >

转载于:https://www.cnblogs.com/islee/archive/2008/03/25/1121598.html