js 多级菜单渲染

最新推荐文章于 2025-04-27 16:35:26 发布

南有樛木。

最新推荐文章于 2025-04-27 16:35:26 发布

阅读量1.2k

点赞数 1

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_35310623/article/details/109272554

版权

js 专栏收录该内容

19 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

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: "四级菜单2-3", children: [{ name: "五级菜单2-3-5" }] }] }] }] }]
  let menu = document.getElementById('menu');
  let menuFun = function (data) {
    let str = "";
    for (let i = 0; i < data.length; i++) {

      str+=`<li>${data[i].name}`;

      if (Array.isArray(data[i]['children'])) {
        str += `<ul>${menuFun(data[i]['children'])}</ul></li>`;
      }
    }
    return str;
  };
  menu.innerHTML =`<ul>${menuFun(json)}</ul>`;

菜单折叠后期更新