js实现左侧菜单栏递归循环遍历

CoyPan 发布于2019-08-23 18:20 / 2650人阅读

摘要：首先布局菜单首页按钮弹框通知提醒全局页签图片画廊轮播图表单登录注册表格基础表格高级表格富文本城市管理订单管理订单详情结束订单员工管理车辆地图图标柱形图饼图折线图权限设置逻辑最后样式图片描述没有写样式简易版本的菜单栏

首先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]

没有写样式简易版本的菜单栏

GPU云服务器云服务器 js左侧固定导航菜单 JS菜单栏 js菜单栏伸缩 js 循环遍历json数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105065.html

尚学堂 react -后台管理系统开发流程

摘要：项目开发准备描述项目技术选型接口接口文档测试接口启动项目开发使用脚手架创建项目开发环境运行生产环境打包运行管理项目创建远程仓库创建本地仓库配置将本地仓库推送到远程仓库在本地创建分支并推送到远程如果本地有修改新的同事克隆仓库如果远程修 day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react...

lemon 2019-08-26 10:42 评论0 收藏0
.each()循环遍历子元素，对比已有元素，避免重复

摘要：以前写循环遍历习惯性用，但是这次突然觉着无从下手了。规定为每个匹配元素规定运行的函数。该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。以前写循环遍历习惯性用 for(){}，但是这次突然觉着无从下手了。场景一：左侧九宫格菜单（显示栏），需要遍历获取每个菜单的id，然后放到数组里。下面是要遍历的HTML代码： ...

浠ラ箍 2019-08-22 17:31 评论0 收藏0
.each()循环遍历子元素，对比已有元素，避免重复

摘要：以前写循环遍历习惯性用，但是这次突然觉着无从下手了。规定为每个匹配元素规定运行的函数。该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。以前写循环遍历习惯性用 for(){}，但是这次突然觉着无从下手了。场景一：左侧九宫格菜单（显示栏），需要遍历获取每个菜单的id，然后放到数组里。下面是要遍历的HTML代码： ...

dinfer 2019-08-02 10:32 评论0 收藏0
EasyUI项目之门户书籍、类别查询、图片上传

摘要：前言继续上一篇讲解项目网上书城之门户书籍类别查询图片上传码字不易，点个关注转载请说明开发工具，目录一目标一目标二具体思路以及代码，效果展示二具体思路以及代码，效果展示一显示菜单栏一显示菜单栏二点击左侧菜单栏，出现对应的书前言：继续上一篇讲解EasyUi项目《网上书城》之门户书籍、类别查询、...

OpenDigg 2021-09-28 09:35 评论0 收藏0