js无限分级 树_js递归,无限分级树形折叠菜单

效果图

mysql表结构形式数据

data数据

第一级是id:0

第二级是id:1,name:'广东',pid:0

第二级是id:5,name:'广西',pid:0

第三级是id:6,name:'玉林',pid:5

第三级是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 += "

• "

menu += "

" + data[i].name

// menu += "

"+"id::" + data[i].id + ",name:"+ data[i].name + ",pid:"+ data[i].pid

menuFn(data[i].id, data) //递归

menu += "

"

menu += "

"

}

}

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 += "

• "

menu += "

" + data[i].name

// menu += "

"+"id::" + data[i].id + ",name:"+ data[i].name + ",pid:"+ data[i].pid

if (data[i].children) {

menuFn(data[i].id, data[i].children) //递归

}

menu += "

"

menu += "

"

}

}

return menu;

}

}

两者区别

数据表形式数据

menuFn(data[i].id, data) //递归

json形式数据

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])

代码

Document

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;

}

$(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 += "

• "

for (var i = 0; i < data.length; i++) { //获取省一级

if (data[i].pid == id) {

menu += "

"

if(data[i].children){

menu += '' + data[i].name + ""

menuFn(data[i].id, data[i].children) //递归

}else{

menu += '' + data[i].name + ""

}

menu += "

"

}

}

menu += "

"

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)

})