js 多级菜单渲染

最新推荐文章于 2023-10-09 12:07:59 发布

南有樛木。

最新推荐文章于 2023-10-09 12:07:59 发布

阅读量1.1k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_35310623/article/details/109272554

版权

这篇博客主要展示了如何使用JavaScript来动态渲染一个多级菜单。通过HTML结构和JS代码，实现了菜单的展开与折叠功能，适用于网页交互设计中。

摘要由CSDN通过智能技术生成

实现效果

html

<div id="menu"></div>

js代码：

  let json = [
    {
      name: "一级菜单1",
      children: [
        { 
          name: "二级菜单1",
          children: [
            { 
              name: "三级菜单1",
              children: [
                { name: "四级菜单1",path:'menu4/menu1' },
                { name: "四级菜单2" ,path:'menu4/menu2'},
                { name: "四级菜单3", 
                  children: [{ name: "五级菜单3-5",path:'menu4/menu3-5' }] }] }] }]
    }, 
    { name: "一级菜单2",
      children: [{ name: "二级菜单2", children: [{ name: "三级菜单2", children: [{ name: "四级菜单2" }, { name: "四级菜单2-2" }, { name: "