首页 > 编程 > JavaScript > 正文

jQuery 无限级菜单的简单实例

2019-11-20 21:04:01

字体：大中小

来源：转载

供稿：网友

我将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>

上一篇：jquery 无限级下拉菜单的简单实现代码

下一篇：js控制table合并具体实现

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

荣耀总裁赵明乌镇演讲：荣耀首款5G手机V30下月发布

2019-10-23 09:17:05

搜狐张朝阳：回归媒体是搜狐重新崛起的关键

2019-10-21 09:20:02

华为轮值董事长郭平：虚拟技术创造现实价值

2019-10-21 09:00:12

滴滴英文服务上线两周年用户已超200万

2019-09-26 08:57:12

华为推出全球至快AI训练集群Atlas900

2019-09-25 08:46:36

马斯克：特斯拉正组建中国技术团队

2019-09-25 08:15:43

疑难解答

图片精选

网友关注