jquery 树形导航菜单无限级

最新推荐文章于 2021-08-05 16:43:32 发布

qq_29069777

最新推荐文章于 2021-08-05 16:43:32 发布

阅读量284

点赞数

分类专栏：前端文章标签： css html jquery

原文链接：https://www.mk2048.com/blog/blog.php?id=hai2iichbahj&title=jquery+%E6%A0%91%E5%BD%A2%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95%E6%97%A0%E9%99%90%E7%BA%A7

版权

前端专栏收录该内容

1175 篇文章 1 订阅

订阅专栏

转自：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>

更多专业前端知识，请上【猿2048】www.mk2048.com

qq_29069777

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 树形导航菜单无限级

转自：http://www.jb51.net/article/71615.htm 侵删 <!DOCTYPE html><html lang="en"><head> <meta chars...
复制链接

扫一扫