我將CSS完全分離出來用jQuery附加式樣,就是為了多層染色,並且產生目錄樹和控製式樣也很容易,生成時也不需要考慮式樣。資料表建議用事先Order排序的方式,不要讀取資料的時候才分級排序,這樣效能會較佳。 我把它做成了個.Net的控件,作為輕量級的無限目錄樹,還是相當好用的。只是還不完善,我先慢慢修改,等差不多了再發佈出來。 複製程式碼 程式碼如下: jQuery 无限级菜单 <br> #menu a {<br> color:#fff;<br> }<br> #menu div {<br> /* text-align:center; */<br> }<br> #menu div a {<br> padding-left:20px;<br> }<br> #menu div.root {<br> display:block;<br> }<br> .list { background:url(list.gif) no-repeat 6px 6px; }<br> <br> $(function(){<br> //颜色列表,如果想支持无限级,最好自动生成颜色列表,不过我的配色一项很差,用生成的就更惨不忍睹了……<br> _cor = ['#003366', '#0066CC', '#3399FF', '#990000', '#CC0000', '#FF3300', '#FF9900', '#FFCC66', '#FFFFFF'];<br> //初始化类<br> (function Init(i,obj){<br> i++;<br> //查找子节点<br> _obj = obj.children('div');<br> //若有子节点,则增加一个专有式样<br> if (_obj.length > 0)<br> obj.addClass('list');<br> $.each(_obj, function(j,o){<br> //若是子目录则隐藏<br> if (i > 0)<br> $(o).hide();<br> //根据目录级数查找颜色字典上背景色,可改为图片什么的。<br> $(o).css('background-color',_cor[i]);<br> //查找子目录<br> Init(i,$(o));<br> });<br> })(-1,$('#menu'));<br> });<br> //跳转链接<br> function GotoURL(obj) {<br> //若链接最末一位不是符号“#”则跳转链接,因为取href得到链接绝对路径,所以只能取最后一位,其实可以传值判断或生成目录树时不产生onclick都是可以的<br> if (obj.href.substring(obj.href.length - 1, obj.href.length) != "#") return true;<br> //拉出和缩进的特效<br> $.each($(obj).parent().children('div'), function(i,o){<br> $(o).slideToggle('slow');<br> });<br> return false;<br> }<br> 第一级 第一级 第二级 第二级 第三级 第四级 第四级 第三级 第四级 第四级 第五级 第五级 第五级 第六级 第六级 第二级 第一级 第二级 第二级 ; 第二級 GotoURL(this)">第三級 ; ">第四等級 > 第四級 ; 第三級 ; 第五級 1097UR00(aURL) 第五級p. 第六級 /div>