当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery 树形导航菜单无限级

jquery 树形导航菜单无限级

2018年05月12日  | 移动技术网IT编程  | 我要评论 
转自：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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网