无为清净楼资源网

jQuery 无限级菜单的简单实例
网络编程 2024/11/18 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

我将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="/UploadFiles/2021-04-02/jquery-1.2.3.min.js">    <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,菜单
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接