jquery 无限极目录树--递归

m0_46701899

于 2023-03-16 10:15:50 发布

阅读量183

点赞数

文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/m0_46701899/article/details/129580290

版权

one.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-3.6.4.min.js"></script>
        <script src="js/dom.js"></script>
    </head>
    <body>
        <div class="list"></div>
    </body>
    <script>
        
        
    </script>
</html>

dom.js

var data=[
    {
        name:'云网业务1',
        child:[
            {
                name:'云网业务12',
                child:[
                    {
                        name:'云网业务121',
                    },
                    {
                        name:'云网业务122',
                    },
                    {
                        name:'云网业务123',
                    },
                    {
                        name:'云网业务124',
                    }
                ]
            }
        ]
    },
    {
        name:'云网业务2',
        child:[
            {
                name:'云网业务22',
                child:[
                    {
                        name:'云网业务221',
                    }
                ]
            }
        ]
    }
]
$(function(){
    // 无限极目录树--递归
    function createTree(data){
        var str="<ul>"
        for(var i=0;i<data.length;i++){
            // 一级目录
            str+='<li>'+data[i].name
            // 判断是否有子级
            if(data[i].child){
                str+=createTree(data[i].child)
            }
            str+='</li>'
        }
        str+='</ul>'
        return str
    }
    $(".list").html(createTree(data))
    // 单击事件
    $(".list ul li").click(function(){
        // 阻止事件冒泡
        event.stopPropagation()
        // 判断是否显示有ul子级
        if($(this).find("ul").is(":visible")){
            $(this).find("ul").hide()
            $(this).find("ul").text()
        }else{
            $(this).find("ul").show()
        }
    })
})