- 貌似現(xiàn)在已經(jīng)都用組件惠险，來，我們復(fù)古一下
樹形菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>樹形菜單-js</title>
</head>
<body>
<div></div>
<script>
//1.無極菜單數(shù)組 -------------------------------------------------------
var menuList =
[
{
id: 1,
title: '班級學(xué)員管理',
sonList: [
{
id: 11,
title: '班級管理',
sonList: [
{
id: 111,
title: '學(xué)員信息管理',
sonList: [
{
id: 1111,
title: '個人考勤',
},
{
id: 1112,
title: '代碼量考勤',
}
]
}, {
id: 112,
title: '學(xué)員課表管理',
sonList: null
}
]
},
{
id: 12,
title: '班級學(xué)員就業(yè)管理',
sonList: null
}
]
},
{
id: 2,
title: '教學(xué)業(yè)務(wù)管理',
sonList: [
{ id: 21, title: '每日反饋' },
{ id: 22, title: '每日測評' }
]
},
{ id: 3, title: '就業(yè)業(yè)務(wù)管理' },
];
//2.業(yè)務(wù)代碼--------------------------------------
// 2.1根據(jù)數(shù)組 創(chuàng)建 子菜單 ------------------------
function makeMenu(list, arrHtml) {
arrHtml.push('<ul>');
for (var i = 0; i < list.length; i++) {
var item = list[i];
if (item.sonList) {
arrHtml.push(`<li data-id="${item.id}">${item.title}`);
makeMenu(item.sonList, arrHtml);
arrHtml.push(`</li>`);
} else {
arrHtml.push(`<li data-id="${item.id}">${item.title}</li>`);
}
}
arrHtml.push('</ul>');
return arrHtml;
}
// 2.2調(diào)用----------------------------------------
//a.準(zhǔn)備空數(shù)組，接收 生成的 html 標(biāo)簽
var arr = [];
//b.調(diào)用方法，將 菜單數(shù)組 和 標(biāo)簽數(shù)組 傳入
arr = makeMenu(menuList, arr);
console.log(arr);
//c.將 標(biāo)簽數(shù)組 中的 元素 用 換行符 拼接成一個 Html字符串债蜜，并設(shè)置給 div
var strHtmlAll = arr.join('\n');
console.log(strHtmlAll);
document.querySelector('div').innerHTML = strHtmlAll;
</script>
</body>
</html>
