欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jquery 树形导航菜单无限级

程序员文章站 2022-04-24 16:38:14
转自：http://www.jb51.net/article/71615.htm 侵删 Document --> ......
转自：http://www.jb51.net/article/71615.htm 侵删
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body{
        padding:0;
        margin:0;
    }
    ul{
        padding: 0;
        margin:0;
    }
    .navlist {
        /*margin-left: -30px;*/
    }
    
    .navlist div {
        padding-left: 15px;
    }
    
    .navlist div ul {
        overflow: hidden;
        display: none;
        height: auto;
    }
    
    .navlist span {
        display: block;
        height: 25px;
        line-height: 25px;
        padding-left: 5px;
        margin: 1px 0;
        cursor: pointer;
        border-bottom: 1px solid #CCC;
    }
    
    .navlist span:hover {
        background-color: #e6e6e6;
        color: #cf0404;
    }
    
    .navlist a {
        color: #333;
        text-decoration: none;
    }
    
    .navlist a:hover {
        color: #06F;
    }
    
    .btn {
        height: 30px;
        margin-top: 10px;
        border-bottom: 1px solid #CCC;
    }
    </style>
</head>
<div class="btn">
    <input name="" type="button" id="btn_open" value="全部展开" />
    <input name="" type="button" id="btn_close" value="全部收缩" />
</div>
<div id="navlist" class="navlist"></div>

<body>
    <!-- <div id="menu"></div> -->
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    var json = [{
        "id": 1,
        "name": "系统管理", // 菜单名称
        "url": "#", //映射URL
        "icon": "sys-icon", //图标样式
        "pid": 0, //父菜单ID
        "items": []
    }, {
        "id": 1,
        "name": "系统管理1", // 菜单名称
        "url": "#", //映射URL
        "icon": "sys-icon", //图标样式
        "pid": 0, //父菜单ID
        "items": null

    }, {
        "id": 5,
        "name": "测试菜单1",
        "url": "#",
        "icon": "sys-icon",
        "pid": 1,
        "items": [{
            "name": "测试菜单1-1",
            "url": "#", //映射URL
        }, {
            "name": "测试菜单1-2",
            "items": [{
                "name": "测试菜单1-2-1",
                "url": "#", //映射URL
            }, {
                "name": "测试菜单1-2-2",
                "url": "#", //映射URL
            }, {
                "name": "测试菜单1-2-3",
                "url": "#", //映射URL
            }]
        }, ]
    }, {
        "id": 5,
        "name": "测试菜单2",
        "url": "#",
        "icon": "sys-icon",
        "pid": 1,
        "items": [{
            "name": "测试菜单2-1",
            "url": "#", //映射URL
        }, {
            "name": "测试菜单2-2",
            "url": "#", //映射URL
        }]
    }, {
        "name": "测试菜单3",
        "items": [{
            "name": "测试菜单3-1",
            "url": "#", //映射URL
            items: [{
                "name": "测试菜单3-1-1",
                "url": "#", //映射URL
            }]
        }, {
            "name": "测试菜单3-2",
            "url": "#", //映射URL
            items: [{
                "name": "测试菜单3-2-1",
                "url": "#", //映射URL
            }]
        }, {
            "name": "测试菜单3-3",
            "url": "#", //映射URL
        }]
    }, {
        "name": "测试菜单4",
    }, {
        "name": "测试菜单5",
    }]
    console.log(json)
    /*递归实现获取无级树数据并生成DOM结构*/
    var str = "";
    var forTree = function(o) {
            for (var i = 0; i < o.length; i++) {
                var urlstr = "";
                try {
                    if (typeof o[i]["url"] == "undefined") {
                        urlstr = "<div><span>" + o[i]["name"] + "</span><ul>";
                    } else {
                        urlstr = "<div><span><a href=" + o[i]["url"] + ">" + o[i]["name"] + "</a></span><ul>";
                    }
                    str += urlstr;
                    if (o[i].items != null) {
                        forTree(o[i].items);
                    }
                    str += "</ul></div>";
                } catch (e) {}
            }
            // console.log(str);
            return str;
        }
        /*添加无级树*/
    document.getElementById("navlist").innerHTML = forTree(json);
    /*树形菜单*/
    var menuTree = function() {
            //给有子对象的元素加[+-]
            $("#navlist ul").each(function(index, element) {
                // console.log(index, element);
                var ulContent = $(element).html();
                var spanContent = $(element).siblings("span").html();
                if (ulContent) {
                    $(element).siblings("span").html("[+] " + spanContent)
                }
            });
            $("#navlist").find("div span").click(function() {
                var ul = $(this).siblings("ul");
                var spanStr = $(this).html();
                var spanContent = spanStr.substr(3, spanStr.length);
                if (ul.find("div").html() != null) {
                    if (ul.css("display") == "none") {
                        ul.show(300);
                        $(this).html("[-] " + spanContent);
                    } else {
                        ul.hide(300);
                        $(this).html("[+] " + spanContent);
                    }
                }
            })
        }()
        /*展开*/
        $("#btn_open").click(function() {
                $("#navlist ul").show(300);
                curzt("-");
            })
            /*收缩*/
        $("#btn_close").click(function() {
            $("#navlist ul").hide(300);
            curzt("+");
        })

    function curzt(v) {
        $("#navlist span").each(function(index, element) {
            var ul = $(this).siblings("ul");
            var spanStr = $(this).html();
            var spanContent = spanStr.substr(3, spanStr.length);
            if (ul.find("div").html() != null) {
                $(this).html("[" + v + "] " + spanContent);
            }
        });
    }
    </script>
</body>

</html>

 

上一篇： 索尼L39重扫iphone5s颜面

下一篇： 中文字体@font-face的导入

推荐阅读