效果图
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 += "<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;
}
}两者区别
数据表形式数据
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])
代码
<!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>