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实现左侧菜单栏递归循环遍历相关推荐
- (js)模板字符串中使用循环遍历数据：
(js)模板字符串中使用循环遍历数据: // 数据格式 let wordList = {id: "2",question: "李四",content: [{ n ...
- 在JS中利用for...in循环遍历对象
for...in循环可以在js中遍历对象或者数组,比如当我们想要输出内容中的所有对象,就可以使用for...in循环 <script> //使用方法 for(键 in 对象)var obj ...
- JS中的12种循环遍历的方法
1.for循环 JS常见的循环,常用于循环数组.字符串之类 let arr = [1, 2, 3]; for (let i = 0; i < arr.length; i++) {console. ...
- ++递归 字符串全排列_超全递归技巧整理，这次一起拿下递归
0. 前言 大家好,我是多选参数的程序锅,一个正在 neng 操作系统.学数据结构和算法以及 Java 的硬核菜鸡.本篇将主要介绍递归相关的内容,下面是本篇的内容提纲. 1. 递归基础 ★ 争哥:从我 ...
- 原生JS 将json数据循环遍历到HTML中
原生JS 将数组的数据循环遍历到HTML中 html如下(图片地址为本地保存的)<div id="article"><!-- <div class=&quo ...
- vba 判断文本框内容是否为空_VBA代码解决方案第119讲：如何遍历工作表中的图形...
大家好,我们今日继续讲解VBA代码解决方案的第119讲内容:如何遍历工作表中的图形.其实这节的内容在我前面的章节中已经讲过,今日但拿出来,作为一节的专门的内容. 工作表中的多个图形,有时我们需要根据实 ...
- 【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )
文章目录 一.Banner 栏版心盒子测量 1.测量版心元素尺寸 2.课程表测量 二.Banner 版心盒子模型左侧导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果 一.Bann ...
- matlab左侧栏没了,AI软件左侧的工具栏不见了没有了怎么显示出来
有不少用户在使用AI这款矢量图形处理工具的时候,发现左侧的工具栏不见了没有了,这样操作很不方便,怎么让其显示出来呢,针对这个问题,小编这就给大家分享一下AI软件左侧的工具栏不见了没有了显示出来的方法吧 ...
- 连连看html游戏全代码js、jquery操作
连连看html游戏全代码js.jquery操作 运行图片 目录路径 连连看水果方块版.html 连连看算法 进行下一个游戏的开发! 注意事项 我会把html文件.css文件提供下载地址,文件夹路径也展 ...
最新文章
- 大数据之路：阿里巴巴大数据实践，附339页PPT下载
- 痛恨3721的朋友们，装个avast! Antivirus吧
- python模拟一个简单的取款机,python简单区块链模拟详解
- 扩展ExtJs的编辑器(HtmlEditor):插入图片
- 分层模式下的Lazy Load ——探索Domain Model系列（下）--转
- 网页视频无法快进播放时（刷网课）
- 红米开发版刷机教程_红米手机稳定版刷机教程(Recovery卡刷)的具体操作方法
- Kotlin for Android (let、with、run、apply、also函数)
- 80后小学计算机课上的游戏,80后最值得回味的15个经典课间游戏(组图)
- redhat8.2-docker安装及部分镜像下载
- 移动端input提起数字键盘如何设置小数点？
- dToF与iToF技术解析
- (leetcode)1723. 完成所有工作的最短时间 -2021/5/8
- LeetCode#860: 柠檬水找零
- 人工智能与具体应用领域如何进行有效的结合
- 干货 | 如何做一档好节目？
- 小木虫为什么会有不好的用户体验？
- 剑三连接服务器未响应,剑三帮会联赛启航！武林争霸赛鹿死谁手，可能要看投资人谁更舍得...
- 腾讯云一键搭建WordPress博客网站
- python短网址转换