php左侧菜单栏递归代码,js实现左侧菜单栏递归循环遍历
首先html布局
菜單json
const menuList = [
{
title: '首頁',
key: '/home'
},
{
title: 'UI',
key: '/ui',
children: [
{
title: '按鈕',
key: '/ui/buttons',
},
{
title: '彈框',
key: '/ui/modals',
},
{
title: 'Loading',
key: '/ui/loadings',
},
{
title: '通知提醒',
key: '/ui/notification',
},
{
title: '全局Message',
key: '/ui/messages',
},
{
title: 'Tab頁簽',
key: '/ui/tabs',
},
{
title: '圖片畫廊',
key: '/ui/gallery',
},
{
title: '輪播圖',
key: '/ui/carousel',
}
]
},
{
title: '表單',
key: '/form',
children: [
{
title: '登錄',
key: '/form/login',
},
{
title: '注冊',
key: '/form/reg',
}
]
},
{
title: '表格',
key: '/table',
children: [
{
title: '基礎表格',
key: '/table/basic',
},
{
title: '高級表格',
key: '/table/high',
}
]
},
{
title: '富文本',
key: '/rich'
},
{
title: '城市管理',
key: '/city'
},
{
title: '訂單管理',
key: '/order',
btnList: [
{
title: '訂單詳情',
key: 'detail'
},
{
title: '結束訂單',
key: 'finish'
}
]
},
{
title: '員工管理',
key: '/user'
},
{
title: '車輛地圖',
key: '/bikeMap'
},
{
title: '圖標',
key: '/charts',
children: [
{
title: '柱形圖',
key: '/charts/bar'
},
{
title: '餅圖',
key: '/charts/pie'
},
{
title: '折線圖',
key: '/charts/line'
},
]
},
{
title: '權限設置',
key: '/permission'
},
];
js邏輯
var ul='';
function appednMenu(data) {
data.forEach(function (item,index) {
if(item.children){
ul+='
'+item.title+'- '
appednMenu(item.children);
ul+='
';}else {
ul+='
'+item.title+''}
})
}
appednMenu(menuList);
console.log(ul);
document.getElementById('abc').innerHTML=ul
最后樣式
![圖片描述][1]
沒有寫樣式 簡易版本的菜單欄
總結
以上是生活随笔為你收集整理的php左侧菜单栏递归代码,js实现左侧菜单栏递归循环遍历的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 变动成本法和完全成本法利润差异
- 下一篇： 动态规划算法php,php算法学习之动态