js遞歸,無限分級樹形摺疊菜單

時間 2020-04-14

原文原文鏈接

效果圖

mysql表結構形式數據

data數據

第一級是id:0css
1. 第二級是id:1,name:'廣東',pid:0
2. 第二級是id:5,name:'廣西',pid:0html
  1. 第三級是id:6,name:'玉林',pid:5mysql
    1. 第三級是id:7,name:'北流',pid:6

var data = [
                { id: 1, name: '廣東', pid: 0 },
                { id: 2, name: '廣州', pid: 1 },
                { id: 3, name: '天河', pid: 2 },
                { id: 4, name: '白雲', pid: 2 },
                { id: 5, name: '廣西', pid: 0 },
                { id: 6, name: '玉林', pid: 5 },
                { id: 7, name: '北流', pid: 6 },
                { id: 8, name: '深圳', pid: 1 },
                { id: 9, name: '東莞', pid: 1 },
                { id: 10, name: '松山湖', pid: 9 },
            ]

js部分

var menu = '';
            menuFn(0, data)
            $("body").append(menu)

            function menuFn(id, data) {
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) { //獲取省一級
                        if (data[i].pid == id) {
                            // console.log(data[i])
                            menu += "<ul>"
                                menu += "<li>" + data[i].name
                                // menu += "<li>"+"id::" + data[i].id + ",name:"+ data[i].name + ",pid:"+ data[i].pid
                                menuFn(data[i].id, data)   //遞歸
                                menu += "</li>"
                            menu += "</ul>"
                        }
                    }
                    return menu;
                }
            }

json結構形式數據

data數據

var data = [
                {
                    id: 1, name: "廣東", pid: 0,
                    children: [
                        {
                            id: 2, name: "廣州", pid: 1,
                            children: [
                                { id: 3, name: "天河", pid: 2 },
                                { id: 4, name: "白雲", pid: 2 },
                            ],
                        },
                        { id: 8, name: "深圳", pid: 1 },
                        {
                            id: 9, name: "東莞", pid: 1,
                            children: [
                                { id: 10, name: "松山湖", pid: 9 },
                            ]
                        },
                    ]
                },
                {
                    id: 5, name: "廣西", pid: 0,
                    children: [
                        {
                            id: 6, name: "玉林", pid: 5,
                            children: [
                                { id: 7, name: "北流", pid: 6 },
                            ]
                        },
                    ]
                },
            ];

js部分

var menu = '';
            menuFn(0, data)
            $("body").append(menu)

            function menuFn(id, data) {
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) { //獲取省一級
                        if (data[i].pid == id) {
                            // console.log(data[i])
                            menu += "<ul>"
                            menu += "<li>" + data[i].name
                            // menu += "<li>"+"id::" + data[i].id + ",name:"+ data[i].name + ",pid:"+ data[i].pid
                            if (data[i].children) {
                                menuFn(data[i].id, data[i].children)   //遞歸
                            }

                            menu += "</li>"
                            menu += "</ul>"
                        }
                    }
                    return menu;
                }
            }

二者區別

數據表形式數據jquery

menuFn(data[i].id, data)   //遞歸

json形式數據sql

if (data[i].children) {
    menuFn(data[i].id, data[i].children)   //遞歸
}

多級摺疊菜單

效果圖

說明

this指向

function fn() {
   // console.log(this)  //span   em
}
$("#app").delegate("span", "click", fn)
$("#app").delegate("em", "click", fn)

二者區別

$(this).parent().children("ul")[0]
$($(this).parent().children("ul")[0])json

代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    ul,
    li {
        list-style: none;
    }

    li {
        position: relative;
        line-height: 30px;
        padding-left: 20px
    }

    em {
        position: absolute;
        top: 7px;
        left: 0;
        width: 16px;
        height: 16px;
        background: url("jian.png") no-repeat;
        cursor: pointer;
        background-size: 16px 16px;
    }
    em.open{
        background: url("jia.png") no-repeat;
        background-size: 16px 16px;
    }
</style>

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function () {
            var data = [
                {
                    id: 1, name: "廣東", pid: 0,
                    children: [
                        {
                            id: 2, name: "廣州", pid: 1,
                            children: [
                                { id: 3, name: "天河", pid: 2 },
                                { id: 4, name: "白雲", pid: 2 },
                            ],
                        },
                        { id: 8, name: "深圳", pid: 1 },
                        {
                            id: 9, name: "東莞", pid: 1,
                            children: [
                                { id: 10, name: "松山湖", pid: 9 },
                            ]
                        },
                    ]
                },
                {
                    id: 5, name: "廣西", pid: 0,
                    children: [
                        {
                            id: 6, name: "玉林", pid: 5,
                            children: [
                                { id: 7, name: "北流", pid: 6 },
                            ]
                        },
                    ]
                },
            ];

            var menu = '';
            menuFn(0, data)
            $("#app").append(menu)

            function menuFn(id, data) {
                if (data.length > 0) {
                    menu += "<ul>"
                    for (var i = 0; i < data.length; i++) { //獲取省一級
                        if (data[i].pid == id) {
                            menu += "<li>"
                            if(data[i].children){
                                menu += '<em></em><span>' + data[i].name + "</span>"
                                menuFn(data[i].id, data[i].children)   //遞歸
                            }else{
                                menu += '<span>' + data[i].name + "</span>"
                            }
                            menu += "</li>"

                        }
                    }
                    menu += "</ul>"
                    return menu;
                }
            }

            function fn() {
                var ull = $($(this).parent().children("ul")[0]);
                if (ull.length > 0) {
                    ull.toggle();
                    $(this).toggleClass("open")
                }
            }
            $("#app").delegate("span", "click", fn)
            $("#app").delegate("em", "click", fn)
        })
    </script>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。