Javascript小案例--树形菜单（菜单数据为对象）

于 2023-09-20 14:53:37 发布
阅读量181 收藏
点赞数
分类专栏： Javascript 文章标签： JavaScript html css 树形菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44922239/article/details/132913800
版权

理论上菜单层级可以无限多，因为是递归渲染。
gif效果图：
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>树形菜单</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 14px;
  }

  body{
    background-color: #444;
  }
  /*侧栏菜单 */
  .aside_menu {
    position: fixed;
    min-width: 350px;
    height: 700px;
    background-color: #333;
    padding: 20px;
    border: 0;
    border-right: 3px solid #333;
    cursor: pointer;
    color: white;
    overflow: auto;
  }

  /* 菜单项 */
  .menuItem{
    margin-bottom: 5px;
    height: 30px;
    line-height: 30px;
    padding-right: 10px;
  }  
  .menuItem:hover {
    color: #333;
    background-color: #bbcaca;
  }

  /* 有子菜单的菜单项 */
  [data-child-count]::after {
    content: '<';
    opacity: 0.3;
    float: right;
  }

  /* 有子菜单的菜单项 */
  .expandable::after {
    content: '>';
    opacity: 0.3;
    float: right;
  }

  /* 子菜单折叠 */
  .collapsable {
    display: none;
  }
</style>

<body>
  <div class="aside_menu">
    <div class="menuwrraper"></div>
  </div>
  <script>
    /**
     * 菜单对象说明：
      {
        id: '0',//菜单id
        name: '菜单名',//菜单名称
        submenu: []//子菜单集合
      },
     **/
    let menuRoot = {
      id: '0',
      name: '树形菜单',
      submenu: [
        {
          id: '0',
          name: '菜单',
          submenu: []
        },
        {
          id: '0',
          name: '菜单',
          submenu: [
            {
              id: '0',
              name: '菜单',
              submenu: [
                {
                  id: '0',
                  name: '菜单',
                  submenu: []
                },
              ]
            },
          ]
        },
        {
          id: '0',
          name: '菜单',
          submenu: [
            {
              id: '0',
              name: '菜单',
              submenu: []
            },
          ]
        },
        {
          id: '0',
          name: '菜单',
          submenu: [
            {
              id: '0',
              name: '菜单',
              submenu: [
                {
                  id: '0',
                  name: '菜单',
                  submenu: [
                    {
                      id: '0',
                      name: '菜单',
                      submenu: [
                        {
                          id: '0',
                          name: '菜单',
                          submenu: [
                            {
                              id: '0',
                              name: '菜单',
                              submenu: [
                                {
                                  id: '0',
                                  name: '菜单',
                                  submenu: [
                                    {
                                      id: '0',
                                      name: '菜单',
                                      submenu: [
                                        {
                                          id: '0',
                                          name: '菜单',
                                          submenu: [
                                            {
                                              id: '0',
                                              name: '菜单',
                                              submenu: [
                                                {
                                                  id: '0',
                                                  name: '菜单',
                                                  submenu: []
                                                },
                                              ]
                                            },
                                          ]
                                        },
                                      ]
                                    },
                                  ]
                                },
                              ]
                            },
                          ]
                        },
                      ]
                    },
                  ]
                },
              ]
            },
          ]
        },
        {
          id: '0',
          name: '菜单',
          submenu: [
            {
              id: '0',
              name: '菜单',
              submenu: [
                {
                  id: '0',
                  name: '菜单',
                  submenu: [
                    {
                      id: '0',
                      name: '菜单',
                      submenu: [
                        {
                          id: '0',
                          name: '菜单',
                          submenu: [
                            {
                              id: '0',
                              name: '菜单',
                              submenu: [
                                {
                                  id: '0',
                                  name: '菜单',
                                  submenu: [
                                    {
                                      id: '0',
                                      name: '菜单',
                                      submenu: [
                                        {
                                          id: '0',
                                          name: '菜单',
                                          submenu: [
                                            {
                                              id: '0',
                                              name: '菜单',
                                              submenu: [
                                                {
                                                  id: '0',
                                                  name: '菜单',
                                                  submenu: []
                                                },
                                              ]
                                            },
                                          ]
                                        },
                                      ]
                                    },
                                  ]
                                },
                              ]
                            },
                          ]
                        },
                      ]
                    },
                  ]
                },
              ]
            },
          ]
        },
        {
          id: '0',
          name: '菜单',
          submenu: [
            {
              id: '0',
              name: '菜单',
              submenu: [
                {
                  id: '0',
                  name: '菜单',
                  submenu: [
                    {
                      id: '0',
                      name: '菜单',
                      submenu: [
                        {
                          id: '0',
                          name: '菜单',
                          submenu: [
                            {
                              id: '0',
                              name: '菜单',
                              submenu: [
                                {
                                  id: '0',
                                  name: '菜单',
                                  submenu: [
                                    {
                                      id: '0',
                                      name: '菜单',
                                      submenu: [
                                        {
                                          id: '0',
                                          name: '菜单',
                                          submenu: [
                                            {
                                              id: '0',
                                              name: '菜单',
                                              submenu: [
                                                {
                                                  id: '0',
                                                  name: '菜单',
                                                  submenu: []
                                                },
                                              ]
                                            },
                                          ]
                                        },
                                      ]
                                    },
                                  ]
                                },
                              ]
                            },
                          ]
                        },
                      ]
                    },
                  ]
                },
              ]
            },
          ]
        },
      ]
    }
    /**
     * menuWrraper-菜单最外层包装盒子,用于包裹当前菜单项及当前菜单项的子菜单
     * level-菜单层级，默认为L0,依次为L1，L2，...
     * menuData-菜单对象
     * paddingLeft-菜单左内边距，会根据菜单层级Level依次增加paddingIncrement
     * paddingIncrement-默认为20，单位为 px
     * */
    function renderMenu(menuData, menuWrraper, level = 0, paddingLeft = 0, paddingIncrement = 20) {
      if (menuData != null) {
        // 0.创建当前菜单
        const menuItem = document.createElement('div')
        // 0.1 添加菜单id
        menuItem.dataset.id = menuData.id
        // 0.2 添加菜单层级L0,L1,L2,...
        menuItem.classList.add(`L${level}`)
        // 0.3 用于控制鼠标 hover效果
        menuItem.classList.add('menuItem')
        // 0.4 菜单左内边距
        menuItem.style.paddingLeft = `${paddingLeft}px`
        // 0.5 菜单内容
        menuItem.innerHTML = `<span>${menuData.name}</span>`
        // 0.6 ****追加当前菜单盒子
        menuWrraper.appendChild(menuItem)
        const submenu = menuData.submenu
        if (submenu.length > 0) {// 如果当前菜单有子菜单，则
          // 1. 为当前菜单追加一个属性，表示其有 子菜单
          // menuItem.dataset.hasChild = 1
          menuItem.dataset.childCount = submenu.length
          // 2. 为当前菜单注册点击事件，可折叠展开子菜单、切换折叠展开图标
          menuItem.addEventListener('click', () => {
            // 2.1 ****用于CSS渲染可展开的最右侧小图标：‘<’ 或者 ‘>’
            menuItem.classList.toggle('expandable')
            // 2.2 ****用于控制子菜单折叠与展开，也即控制submenuWrraper的dispaly属性为‘none’或者‘block’
            menuItem.nextElementSibling.classList.toggle('collapsable')
          })
          // 3. 菜单层级加1
          level++;
          // 4. 左边距增加
          paddingLeft += paddingIncrement
          // 5. 创建子菜单包装盒子
          const submenuWrraper = document.createElement('div')
          // 7.*****追加子菜单盒子，追加这个盒子的原因是 2.2
          menuWrraper.appendChild(submenuWrraper)
          // 6.*****循环当前菜单的子菜单
          for (let i = 0; i < submenu.length; i++) {
            // 6.1 ****递归渲染每一项子菜单
            renderMenu(submenu[i], submenuWrraper, level, paddingLeft)
          }
          
        }
      }
    }
    // 调用菜单渲染函数生成页面数据
    renderMenu(menuRoot, document.querySelector('.menuwrraper'))
    // 渲染完毕后，释放菜单数据
    menuRoot = null
  </script>
</body>

</html>
bitDesigner
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js树形菜单 如何用递归制作一个简单的树形菜单
Z_B_L的博客
09-10 474
树形菜单不仅美观、用户使用便捷，且灵活性高、层级关系可视化，对于刚学习js的同志来说是一个非常好的递归函数学习案例。本文演示一个非常简单的树形菜单，不仅简洁，而且样式可塑性高，欢迎萌新前来学习和交流。直到找不到子元素为止，最后将末尾div补全（PS：怕新手不知道，上图的”let item of data“中的item 类似于for循环的变量 i ）。函数内的字符数按模板为渲染的html结构，先拼前半段，中间利用递归原理将子元素+=进”str“里，就可以实现来回伸缩的样子啦，萌新们赶快去试一逝吧>w
JS实现树形菜单递归函数（折叠菜单）
qingdouxiaohua的博客
09-19 391
树形菜单功能呢，他就像点菜单点开一项呢，他就出来这一项的内容，让小伙伴们看起来更舒服，分类明确。这是展示出来的版本（做的不太好！嘻嘻），接下来让我一起来看看代码把！（需要改正的地方轻请多多指点！）
JavaScript小案例-树形菜单(菜单数据为数组)
最新发布
qq_44922239的博客
09-20 205
JavaScript小案例：树形菜单效果
js树状菜单制作
m0_73481765的博客
07-02 403
这段代码为树形菜单的每个li元素添加了一个单击事件监听器。当用户单击它时，它会查找它的子菜单并将其显示或隐藏。它还为菜单项添加了一个“open”类，以便我们可以使用CSS样式控制其外观。使用JavaScript创建一个事件侦听器，以便用户单击菜单项时显示或隐藏其子菜单。首先，在HTML中创建一个带有ul和li标记的基本树形结构。现在，我们已经创建了一个简单的可展开/折叠的树形菜单！添加CSS样式以控制树形菜单的外观和布局。
用JS实现简单的树形菜单的功能制作
Mxy18851251178的博客
09-14 611
首先我想分享的是，什么是递归函数——如果一个函数内部调用自已本身，并且通过条件控制避免陷入死循环,这就是递归函数。根据console.log来判断是否请求成功，请求成功的话就可以开始下一步也就是Js的渲染了。函数内的字符数按模板为渲染的html结构，先拼前半段，中间利用递归原理将结构拼接到str内部。hallo 大家好 我是你们的孟大王 我今天刚做好一个树形菜单的功能 给你们分享一下。html和css样式完成以后可以开始js的渲染了。常见的树形菜单就可以用递归函数很轻松的实现。话不多说 直接上代码！
javascript经典特效---树形菜单(二).rar
01-04
在JavaScript编程领域中，树形菜单是一种常见的交互元素，它以层级结构展示数据，通常用于网站导航、文件系统浏览或复杂的数据组织。本资源“javascript经典特效---树形菜单(二).rar”聚焦于实现这样的功能，特别是...
javascript经典特效---树形菜单(一).rar
12-29
在JavaScript的世界里，树形菜单是一种常见的用户界面元素，它以层次结构展示数据，通常用于网站导航、文件系统浏览或数据库记录的展示。本压缩包文件"javascript经典特效---树形菜单(一).rar"主要关注如何使用...
javascript实现树形菜单的方法
10-23
JavaScript 实现树形菜单是一种常见的前端开发技术，用于在网页中构建层次结构的导航系统。在本示例中，我们看到一个使用纯 JavaScript 编写的简单树形菜单的实现，它涉及到了动态操作DOM元素以及处理节点属性的技术...
layui树形菜单动态遍历的例子
10-16
动态遍历树形菜单通常用于显示层级结构的数据，例如文件系统、组织结构或者权限管理等。 首先，我们来看前端部分。在jsp页面中，需要引入layui的CSS和JavaScript库，并且注册layui的`layer`和`tree`模块。`layer`...
javascript动态生成树形菜单的方法
01-21
本文实例讲述了javascript动态生成树形菜单的方法。分享给大家供大家参考，具体如下： //======================================== //Envrionment to hold Listeners //======================================== ...
带有复选框的JS树状菜单
01-24
这个是带有复选框的JS树状菜单，免费给大家分享下
javascript制作 树形菜单.zip
03-20
js制作 树形菜单.zip
js实现树型下拉菜单
11-07
用js实现树型下拉菜单
js实现菜单树渲染
weixin_64560999的博客
06-01 265
js实现菜单树的转化和渲染
js实现树型、数组结构转换与多级菜单查找
垂死病中惊坐起，菜鸟竟是我自己，于是含泪写下博客
08-28 486
最近在一次面试中被问到数组与树形结构的转换，故将可能出现的相关题型做总结，包含：数组结构转换为树形结构、树形结构转换为数组结构、多级菜单查找某一子菜单并返回相应节点
JS 案例 树形菜单
suiferq的博客
05-14 1596
制作树形菜单 需求说明 使用项目列表制作一个完整的树形菜单，可通过单击一级菜单来显示和隐藏二级菜单，完成效果如图所示： 使用带参数的函数，通过参数来控制显示或隐藏某个列表。 HTML代码片： <div class="menu"> <ul id="menu"> <li class="menuList"> 职能部门 <ul> <li>学工部</li> <li>后勤&l
js构建树形菜单
qq_36171991的博客
02-27 1170
数据以数组形式存储，元素包括id和parentid var data = [ { id: 1, name: "办公管理", pid: 0 }, { id: 2, name: "请假申请", pid: 1 }, { id: 3, name: "出差申请", pid: 1 }, { id: 4, name: "请假记录", pid: 2 }, { id: 5, name: "系统设置", pid: 0 }, { id: 6, name: "权限管理", pid
JS实现树形菜单
柚稚的博客
07-07 3578
需求 用JS实现树形结构，原本的数据是数组类型，需要先把数据进行处理，然后在页面上渲染DOM，注意点有以下几点： 1、data必须含有id和fatherId来表示他们的层级关系 2、js动态创建DOM的实现方式是先创建一个div，然后把生成的元素appendChild给这个div 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-eq
用JS写一个网站树形菜单
weixin_30702887的博客
11-08 1256
先上效果图： 主体内容就是侧边展示的一二三级菜单，树形结构的。 前端页面布局内容，页面内容简单用ul li 来完成所有的罗列项。用先后顺序来区分一级二级三级： <body> <b><img src="images/fold.gif">树形菜单：</b> <ul><a hr...
ant-design-vue table树形数据
08-20
对于 ant-design-vue 中的 table 组件展示树形数据，你可以按照以下步骤操作： 1. 首先，在你的 Vue 组件文件中引入 treeTable 组件： ```javascript import { Tree } from 'ant-design-vue'; ``` 2. 定义表格的列配置，包括树形节点的渲染方法： ```javascript const columns = [ { title: '名称', dataIndex: 'name', key: 'name', // 树形节点渲染方法 customRender: ({ text, record }) => { const hasChildren = record.children && record.children.length > 0; return hasChildren ? <a>{text}</a> : text; }, }, // 其他列配置... ]; ``` 3. 在 Vue 的 template 中使用 treeTable 组件，并传入数据和列配置： ```html <template> <a-table :columns="columns" :dataSource="data"> <template slot="name" slot-scope="text, record"> <!-- 树形节点渲染 --> <a v-if="record.children && record.children.length > 0" @click="toggleExpanded(record)"> {{ text }} </a> <span v-else>{{ text }}</span> </template> </a-table> </template> ``` 4. 在 Vue 的 methods 中定义展开/收起节点的方法： ```javascript methods: { toggleExpanded(record) { record.__expanded = !record.__expanded; }, }, ``` 注意：在展开和收起节点时，需要添加一个 `__expanded` 属性来记录节点的展开状态。你可以根据实际业务需求进行相关调整。 这样，你就可以在 ant-design-vue 的 table 组件中展示树形数据了。希望对你有所帮助！如有需要，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bitDesigner

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值