Javascript

原生js动态生成树形菜单

本文主要是介绍原生js动态生成树形菜单，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生js动态生成树形菜单 </title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
    <div id="menuTree" class="menuTree"></div>
</body>
<style>
    .menuTree div {
        padding-left: 20px;
    }

    .menuTree div ul {
        overflow: hidden;
        display: none;
        height: auto;
    }

    .menuTree span {
        display: block;
        height: 25px;
        line-height: 25px;
        padding-left: 5px;
        margin: 1px 0;
        cursor: pointer;
        border-bottom: 1px solid #CCC;
    }

    .menuTree span:hover {
        background-color: #e6e6e6;
        color: #cf0404;
    }

    .menuTree a {
        color: #333;
        text-decoration: none;
    }

    .menuTree a:hover {
        color: #06F;
    }

    .btn {
        height: 30px;
        margin-top: 10px;
        border-bottom: 1px solid #CCC;
    }
</style>
<script type="text/javascript">
    var json = [{
            "name": "1级菜单",
            "list": [{
                    "name": "2级菜单",
                    "url": "/url1"
                },
                {
                    "name": "2级菜单",
                    "list": [{
                            "name": "3级菜单",
                            "list": [{
                                "name": "4级菜单",
                                "url": "/url111"
                            }, {
                                "name": "4级菜单",
                                "list": [{
                                    "name": "5级菜单",
                                    "url": "/url1111"
                                }, {
                                    "name": "5级菜单",
                                    "url": "/url1112"
                                }]
                            }]
                        },
                        {
                            "name": "3级菜单",
                            "url": "/url13"
                        },
                        {
                            "name": "3级菜单",
                            "url": "/url14"
                        }
                    ]
                },
                {
                    "name": "2级菜单",
                    "url": "/url3"
                }
            ]
        },
        {
            "name": "1级菜单",
            "list": [{
                    "name": "2级菜单",
                    "url": "/url1"
                },
                {
                    "name": "2级菜单",
                    "list": [{
                            "name": "3级菜单",
                            "url": "/url111"
                        },
                        {
                            "name": "3级菜单",
                            "url": "/url112"
                        }
                    ]
                },
            ]
        },
        {
            "name": "1级菜单",
            "list": [{
                    "name": "2级菜单",
                    "url": "/url1"
                },
                {
                    "name": "2级菜单",
                    "url": "/url2"
                }
            ]
        },
        {
            "name": "1级菜单"
        }
    ]
    /*递归实现获取多级树数据并生成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]["list"] != null) {
                    forTree(o[i]["list"]);
                }
                str += "</ul></div>";
            } catch (e) {}
        }
        return str;
    }
    /*添加多级树*/
    document.getElementById("menuTree").innerHTML = forTree(json);
    /*树形菜单*/
    var menuTree = function () {
        //所有父元素加[+-]
        $("#menuTree ul").each(function (index, element) {
            var ulContent = $(element).html();
            var spanContent = $(element).siblings("span").html();
            if (ulContent) {
                $(element).siblings("span").html("[+] " + spanContent)
            }
        });

        $("#menuTree").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 () {
        $("#menuTree ul").show(300);
        curzt("-");
    })
    /*收缩*/
    $("#btn_close").click(function () {
        $("#menuTree ul").hide(300);
        curzt("+");
    })

    function curzt(v) {
        $("#menuTree 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>
</html>

效果图
在这里插入图片描述

这篇关于原生js动态生成树形菜单的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航