jQuery 无限级菜单的简单实例

前端技术 2023/09/01 JavaScript

我将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.stayed.cn/item/2411

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案