递归树级目录的效果实现

最新推荐文章于 2022-03-12 10:47:12 发布

wj_秦桑低绿枝

最新推荐文章于 2022-03-12 10:47:12 发布

阅读量272

点赞数

分类专栏：面试经验文章标签： css javascript jquery

本文链接：https://blog.csdn.net/qinsangdilvzhi/article/details/106242220

版权

面试经验专栏收录该内容

5 篇文章 0 订阅

订阅专栏

之前面试要求手撕这道类似的场景题，正好遇到一个视频讲解，看完之后自己敲了一遍并记录下来。
本来要用原生写，偷懒用了Jquery。

data.js

var data=[{
    name:'互联网',
    child:[
    {name:'编程语言',child:[{name:'java'},{name:'python'},{name:'c++'}]},
    {name:'移动开发',child:[{name:'iOS开发'},{name:'android开发'}]},
    {name:'游戏开发',child:[{name:'webGL开发'},{name:'phase开发'}]}
    ]
},
{
    name:'设计创作',
    child:[
    {name:'平面设计',child:[{name:'电商设计'},{name:'综合平面'}]},
    {name:'UI设计',child:[{name:'交互设计'},{name:'游戏UI设计'},{name:'Web UI设计'}]},
    {name:'软件设计'}]
},
{
    name:'升学考研',
    child:[{name:'考研'},{name:'大学'},{name:'高中'},{name:'初中'}]
},
{
    name:'职企考证',
    child:[{
        name:'公务员',child:[{name:'教师考试'},{name:'建筑工程'}]}]
}];

$(function(){
    function createTree(data){//递归获取数据，返回str
        var str="<ul>";
        for(var i=0;i<data.length;i++){
            str+="<li><span>-</span>"+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.stopImmediatePropagation();//阻止事件冒泡
        if($(this).find('ul').is(":visible")){
            $(this).find('ul').hide();
            $(this).find('span').text("+");
        }else{
            $(this).find('ul').show();
            $(this).find('span').text("-");
        }
    })
})

tree.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>递归树级目录</title>
    <style>
        ul{
            list-style-type: none;
        }
        ul li span{
            color: red;
            border-radius: 50%;
            height: 15px;
            width: 15px;
            border: 1px solid #1890ff;
            text-align: center;
            vertical-align: middle;
            line-height: 15px;
            margin-right: 10px;
            cursor:default;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="list"></div>
</body>

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="data.js"></script>
</html>

效果图

手撕时的关键代码：

$(function(){
    function createTree(data){//递归获取数据，返回str
        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));
    })

wj_秦桑低绿枝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
递归树级目录的效果实现

之前面试要求手撕这道类似的场景题，正好遇到一个视频讲解，看完之后自己敲了一遍并记录下来。本来要用原生写，偷懒用了Jquery。data.jsvar data=[{ name:'互联网', child:[ {name:'编程语言',child:[{name:'java'},{name:'python'},{name:'c++'}]}, {name:'移动开发',child:[{name:'iOS开发'},{name:'android开发'}]}, {name:'游
复制链接

扫一扫