一、效果

在这里插入图片描述

二、代码

1、原样展示树形结构

<html>
<head>
    <title>Demo-原样</title>
    <style>
        body {
            margin: 20px;
        }

        ul {
            list-style-type: none;
            margin: 10px 0px 10px 0px;
            padding: 0px;
            color: #00a0e9;
        }

        .title1 {
            font-size: 20px;
        }

        .title2 {
            padding-left: 30px;
            font-size: 18px;
        }

        .title3 {
            padding-left: 60px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<ul id="content">
    <li class="title1"><a href="#">首页</a></li>
    <li class="title1"><a href="#">内容分类</a></li>
    <li class="title2"><a href="#">内容分类1</a></li>
    <li class="title2"><a href="#">内容分类2</a></li>
    <li class="title3"><a href="#">内容分类2-内容1</a></li>
    <li class="title3"><a href="#">内容分类2-内容2</a></li>
    <li class="title1"><a href="#">关于我们</a></li>
    <li class="title2"><a href="#">联系我们</a></li>
</ul>
</body>
</html>

2、循环展示树形结构

<html>
<head>
    <title>Demo-循环</title>
    <style>
        body {
            margin: 20px;
        }

        ul {
            list-style-type: none;
            margin: 10px 0px 10px 0px;
            padding: 0px;
            color: #00a0e9;
        }

        .title1 {
            font-size: 20px;
        }

        .title2 {
            padding-left: 30px;
            font-size: 18px;
        }

        .title3 {
            padding-left: 60px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<ul id="content">
    <!--<li class="title1"><a href="#">首页</a></li>
    <li class="title1"><a href="#">内容分类</a></li>
    <li class="title2"><a href="#">内容分类1</a></li>
    <li class="title2"><a href="#">内容分类2</a></li>
    <li class="title3"><a href="#">内容分类2-内容1</a></li>
    <li class="title3"><a href="#">内容分类2-内容2</a></li>
    <li class="title1"><a href="#">关于我们</a></li>
    <li class="title2"><a href="#">联系我们</a></li>-->
</ul>
</body>
</html>
<script>
    //定义树形结构数据
    var data = [
        {id: 1, pid: 0, title: '首页', type: 'bar', page: '/home'},
        {
            id: 2,
            pid: 0,
            title: '内容分类',
            type: 'bar',
            page: '/cate',
            child: [
                {id: 4, pid: 2, title: '内容分类1', type: 'bar', page: '/cate1'},
                {
                    id: 5,
                    pid: 2,
                    title: '内容分类2',
                    type: 'bar',
                    page: '/cate2',
                    child: [
                        {id: 7, pid: 5, title: '内容分类2-内容1', type: 'detail', page: ''},
                        {id: 8, pid: 5, title: '内容分类2-内容2', type: 'detail', page: ''}
                    ]
                }
            ]
        },
        {
            id: 3,
            pid: 0,
            title: '关于我们',
            type: 'bar',
            page: '/about_us',
            child: [
                {id: 6, pid: 3, title: '联系我们', type: 'bar', page: '/contact_us'}
            ]
        }
    ];

    makeHtml(data);

    //创建html
    function makeHtml(data) {
        var html = '';

        //循环填充内容html
        var length = data.length;
        for (var i = 0; i < length; i++) {
            var oneInfo = data[i];

            html += '<li class="title1"><a href="' + jumpPage(oneInfo) + '">' + oneInfo.title + '</a></li>';

            var oneChild = oneInfo.child; //undefined
            if (oneChild) { //循环二级数据
                // html += "<br/>";

                var oneLength = oneChild.length;
                for (var j = 0; j < oneLength; j++) {
                    var twoInfo = oneChild[j];

                    html += '<li class="title2"><a href="' + jumpPage(twoInfo) + '">' + twoInfo.title + '</a></li>';

                    var twoChild = twoInfo.child; //undefined
                    if (twoChild) {
                        // html += "<br/>";

                        var twoLength = twoChild.length;
                        for (var k = 0; k < twoLength; k++) {
                            var threeInfo = twoChild[k];

                            html += '<li class="title3"><a href="' + jumpPage(threeInfo) + '">' + threeInfo.title + '</a></li>';
                        }
                    }
                }
            }
        }

        document.getElementById('content').innerHTML = html; //数据渲染
        // $('ul#content').html(html); //jquery数据渲染
    }

    /**
     * 根据类型，返回跳转的链接
     * @param info
     * @returns {string}
     */
    function jumpPage(info) {
        var url;
        if (info.type == 'bar') { //跳分类的页面
            url = info.page;
        } else { //跳详情
            url = 'detail?id=' + info.id;
        }
        return url;
    }
</script>

3、递归展示树形结构

<html>
<head>
    <title>Demo-递归</title>
    <style>
        body {
            margin: 20px;
        }

        ul {
            list-style-type: none;
            margin: 10px 0px 10px 0px;
            padding: 0px;
            color: #00a0e9;
        }

        .title1 {
            font-size: 20px;
        }

        .title2 {
            padding-left: 30px;
            font-size: 18px;
        }

        .title3 {
            padding-left: 60px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<ul id="content">
    <!--<li class="title1"><a href="#">首页</a></li>
    <li class="title1"><a href="#">内容分类</a></li>
    <li class="title2"><a href="#">内容分类1</a></li>
    <li class="title2"><a href="#">内容分类2</a></li>
    <li class="title3"><a href="#">内容分类2-内容1</a></li>
    <li class="title3"><a href="#">内容分类2-内容2</a></li>
    <li class="title1"><a href="#">关于我们</a></li>
    <li class="title2"><a href="#">联系我们</a></li>-->
</ul>
</body>
</html>
<script>
    //定义树形结构数据
    var data = [
        {id: 1, pid: 0, title: '首页', type: 'bar', page: '/home'},
        {
            id: 2,
            pid: 0,
            title: '内容分类',
            type: 'bar',
            page: '/cate',
            child: [
                {id: 4, pid: 2, title: '内容分类1', type: 'bar', page: '/cate1'},
                {
                    id: 5,
                    pid: 2,
                    title: '内容分类2',
                    type: 'bar',
                    page: '/cate2',
                    child: [
                        {id: 7, pid: 5, title: '内容分类2-内容1', type: 'detail', page: ''},
                        {id: 8, pid: 5, title: '内容分类2-内容2', type: 'detail', page: ''}
                    ]
                }
            ]
        },
        {
            id: 3,
            pid: 0,
            title: '关于我们',
            type: 'bar',
            page: '/about_us',
            child: [
                {id: 6, pid: 3, title: '联系我们', type: 'bar', page: '/contact_us'}
            ]
        }
    ];

    makeHtml(data);

    //组装html元素
    function makeHtml(data) {
        //递归填充内容html
        var html = recursionHtml(data, 1);

        document.getElementById('content').innerHTML = html; //数据渲染
        // $('ul#content').html(html); //jquery数据渲染
    }

    /**
     * 递归返回html
     * @param data 数据
     * @param classNumber 首页的层级数字，对应class的值
     * @returns {string|string}
     */
    function recursionHtml(data, classNumber) {
        var html = "";
        var length = data.length;
        var className = "title" + classNumber;

        classNumber += 1; //自增位置注意

        for (var i = 0; i < length; i++) {
            var info = data[i]; //单条数据

            html += '<li class="' + className + '"><a href="' + jumpPage(info) + '">' + info.title + '</a></li>';

            var oneChild = info.child; //undefined
            if (oneChild) {
                html += recursionHtml(oneChild, classNumber); //追加子元素内容
            }
        }

        return html;
    }

    /**
     * 根据类型，返回跳转的链接
     * @param info
     * @returns {string}
     */
    function jumpPage(info) {
        var url;
        if (info.type == 'bar') { //跳分类的页面
            url = info.page;
        } else { //跳详情
            url = 'detail?id=' + info.id;
        }
        return url;
    }
</script>