jQuery 无限级菜单实现

fmms 12年前

我将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> <href="#" onclick="return GotoURL(this)">第一级</a> </div>
        
<div> <href="#" onclick="return GotoURL(this)">第一级</a>
            
<div> <href="#" onclick="return GotoURL(this)">第二级</a> </div>
            
<div> <href="#" onclick="return GotoURL(this)">第二级</a>
                
<div> <href="#" onclick="return GotoURL(this)">第三级</a>
                    
<div> <href="#" onclick="return GotoURL(this)">第四级</a> </div>
                    
<div> <href="#" onclick="return GotoURL(this)">第四级</a> </div>
                
</div>
                
<div> <href="#" onclick="return GotoURL(this)">第三级</a>
                    
<div> <href="#" onclick="return GotoURL(this)">第四级</a> </div>
                    
<div> <href="#" onclick="return GotoURL(this)">第四级</a>
                        
<div> <href="#" onclick="return GotoURL(this)">第五级</a> </div>
                        
<div> <href="#" onclick="return GotoURL(this)">第五级</a> </div>
                        
<div> <href="#" onclick="return GotoURL(this)">第五级</a>
                            
<div> <href="#" onclick="return GotoURL(this)">第六级</a> </div>
                            
<div> <href="#" onclick="return GotoURL(this)">第六级</a> </div>
                        
</div>
                    
</div>
                
</div>
            
</div>
            
<div> <href="#" onclick="return GotoURL(this)">第二级</a> </div>
        
</div>
        
<div> <href="#" onclick="return GotoURL(this)">第一级</a>
            
<div> <href="#" onclick="return GotoURL(this)">第二级</a> </div>
            
<div> <href="#" onclick="return GotoURL(this)">第二级</a> </div>
            
<div> <href="#" onclick="return GotoURL(this)">第二级</a>
                
<div> <href="#" onclick="return GotoURL(this)">第三级</a>
                    
<div> <href="#" onclick="return GotoURL(this)">第四级</a> </div>
                    
<div> <href="#" onclick="return GotoURL(this)">第四级</a> </div>
                
</div>
                
<div> <href="#" onclick="return GotoURL(this)">第三级</a>
                    
<div> <href="#" onclick="return GotoURL(this)">第四级</a> </div>
                    
<div> <href="#" onclick="return GotoURL(this)">第四级</a>
                        
<div> <href="#" onclick="return GotoURL(this)">第五级</a> </div>
                        
<div> <href="#" onclick="return GotoURL(this)">第五级</a> </div>
                        
<div> <href="#" onclick="return GotoURL(this)">第五级</a>
                            
<div> <href="#" onclick="return GotoURL(this)">第六级</a> </div>
                            
<div> <href="#" onclick="return GotoURL(this)">第六级</a> </div>
                        
</div>
                    
</div>
                
</div>
            
</div>
        
</div>
    
</div>

</body>
</html>
转自:http://blog.csdn.net/jpr1990/article/details/7245713