递归无限级目录树

Html

Css

ul {
	list-style-type:none;
}
ul li span {
	color:red;
	padding-right:10px;
}

var data = [{
        name: 'IT互联网',
        child: [{
                name: '编辑语言',
                child: [{
                    name: 'java'
                }, {
                    name: 'c#/.net'
                }, {
                    name: 'python'
                }, {
                    name: '前端开发'
                }]
            },
            {
                name: '移动开发',
                child: [{
                    name: 'android开发'
                }, {
                    name: 'IOS开发'
                }]
            },
            {
                name: '游戏开发',
                child: [{
                    name: 'phaser游戏开发'
                }, {
                    name: 'webGL游戏开发',
                    child: [{
                        name: '3D游戏'
                    }, {
                        name: '2D游戏'
                    }]
                }]
            }
        ]
    },
    {
        name: '设计创作',
        child: [{
                name: '平面设计',
                child: [{
                    name: '电商美工'
                }, {
                    name: '综合平面设计'
                }, {
                    name: '摄影后期'
                }]
            },
            {
                name: 'UI设计',
                child: [{
                    name: '交互设计'
                }, {
                    name: 'webUI设计'
                }, {
                    name: '游戏UI设计'
                }]
            },
            {
                name: '软件设计'
            }
        ]
    },
    {
        name: '升学考研',
        child: [{
            name: '考研'
        }, {
            name: '大学'
        }, {
            name: '高中'
        }, {
            name: '初中'
        }]
    },
    {
        name: '职企考证',
        child: [{
            name: '公务员',
            child: [{
                name: '教师考试'
            }, {
                name: '建筑工程'
            }]
        }]
    }
];

$(function() {
    //递归
    function createTree(data) {
        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;
    };
    $(".lists").html(createTree(data));

//单击事件
    $(".lists ul li").click(function(event) {
        event.stopPropagation(); //阻止事件冒泡
        //判断有没有子级
        if ($(this).find("ul").is(":visible")) {
            //隐藏   +
            $(this).find("ul").hide();
            $(this).find("span").text("+");
        } else {
            //显示  -
            $(this).find("ul").show();
            $(this).find("span").text("-");
        }
    })
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.1

立即下载

递归无限级目录树



代码描述：jQuery递归无限级目录树

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

yjlzg6688

相关代码

递归无限级目录树

最新