JavaScript小案例-树形菜单(菜单数据为数组)

菜单层级理论上可以无限多,因为是递归渲染。

gif演示图:
在这里插入图片描述
代码:
树形菜单.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>树形菜单-数组</title><style>* {padding: 0;margin: 0;box-sizing: border-box;font-size: 14px;color: #fff;}body {background-color: #222;}.aside-menu {position: fixed;padding: 20px;width: 300px;height: 700px;background-color: #333;overflow: auto;}ul {list-style: none;}.aside-menu a {display: block;text-decoration: none;height: 30px;line-height: 30px;}.active {color: #00ff30;}.aside-menu a:hover {background-color: #727171;}[data-childs]::after {content: '-';float: right;}.expand::after {content: '+';float: right;}.notdisplay {display: none;}</style>
</head><body><div class="aside-menu"><ul class="menuwrapper"></ul></div><script>// 菜单数据集合let menuArray = [{id: '0',//菜单idname: '树形菜单',//菜单名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: []},]/*** menuData-菜单数组* menuwrapper-当前菜单项包裹盒子* level-菜单层级,L0,L1,L2,...* paddingLeft-当前菜单的子菜单左内边距,制造树形缩进效果* paddingLeftIncrement-每层菜单左内边距增加值,默认20(px)*/function renderMenu(menuData, menuwrapper, level = 0, paddingLeft = 0, paddingLeftIncrement = 20) {if (menuData && menuData.length > 0) {let l = levelmenuwrapper.classList.add(`L${l}`)menuwrapper.style.paddingLeft = `${paddingLeft}px`for (let i = 0; i < menuData.length; i++) {/** * <ul class="menuwrapper">*  <li class="menuitem">*   <a href="#" data-childs="3" class="expand"><span class="active">菜单名</span>::after</a>*   <ul class="notdisplay">*    </ul>*  </li>* </ul>*/const menuItem = document.createElement('li')menuItem.classList.add('menuitem')const link = document.createElement('a')link.href = '#'link.innerHTML = `<span>${menuData[i].name}</span>`menuItem.appendChild(link)menuwrapper.appendChild(menuItem)const submenu = menuData[i].submenuif (submenu.length > 0) {l++link.dataset.childs = submenu.lengthconst submenuWrapper = document.createElement('ul')// 展开折叠图标切换、子菜单显示隐藏切换link.addEventListener('click', () => {link.classList.toggle('expand')link.nextElementSibling.classList.toggle('notdisplay')})paddingLeft = paddingLeftIncrement// 递归渲染子菜单数组renderMenu(submenu, submenuWrapper, l, paddingLeft)menuItem.appendChild(submenuWrapper)}}}}const menuwrapper = document.querySelector('.menuwrapper')// 活跃菜单menuwrapper.addEventListener('click', (e) => {if (e.target.tagName === 'A') {let activeLink = document.querySelector('.active')if (activeLink) activeLink.classList.remove('active')e.target.firstElementChild.classList.add('active')}})// 渲染renderMenu(menuArray, menuwrapper)// 释放菜单数据menuArray = null</script>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/83808.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

超越创意,从用户创造内容到AI生成内容的新时代

在这个信息爆炸的时代&#xff0c;内容创作正经历前所未有的变革&#xff0c;其频率和多样性令人瞠目结舌。曾经&#xff0c;我们主要依赖传统媒体&#xff0c;需要专业团队为人们打造内容&#xff0c;这被称为专业生成内容&#xff08;PGC&#xff0c;Professional-generated …

vue3 reactive使用(四)

1&#xff1a;reactive全家桶 rective直接赋值无效&#xff0c;会破坏proxy响应式代理 const newList reactive<string[]>([]) const newCreate () > {setTimeout(() > {const res [生活, 升华, 生生不息]newList res console.log(newList:, newList) // d…

MD5加密算法

1、简介 MD5在90年代初由MIT的计算机科学实验室和RSA Data Security Inc发明&#xff0c;经MD2、MD3和MD4发展而来。 MD5将任意长度的“字节串”变换成一个128bit的大整数&#xff0c;并且它是一个不可逆的字符串变换算法&#xff0c;换句话说就是&#xff0c;即使你看到源程序…

IO口电路种类

文章目录 参考1.高速振荡电路&#xff08;时钟IO引脚&#xff09;2.与 GPIO 功能共享的低速振荡电路&#xff08;子时钟IO&#xff09;3.CMOS 滞后输入引脚4.电源输入保护电路5.A/D 转换器 ref (AVRH)带保护电路的电源输入端6.CMOS 电平输出7.CMOS 电平输出&#xff0c;带有模…

sublime text3 设置代码错误提示之php

第一步&#xff1a; ctrlshiftp 输入 install package 并选中 第二步&#xff1a; 输入 sublimelinter-php 第三步&#xff1a; Prefernces> package Settings >Sublimelinter > settings 这里不同按照版本可能不一样 有些可能是 settings User 第四步 完成

Python 变量

视频版教程 Python3零基础7天入门实战视频教程 变量 无论使用什么语言编程&#xff0c;总要处理数据&#xff0c;处理数据就需要使用变量来保存数据。变量就像一个个小容器&#xff0c;用于“盛装”程序中的数据。 再说说&#xff0c;Python的数据类型&#xff0c;有以下六种…

mysql 主从复制 mysql版本5.7.35

文章目录 1.注意要点2.环境3.MySQL 主从配置的步骤&#xff1a;主从库新增DB主服务配置my.cnf从服务配置my.cnf主服务器创建复制用户从服务器执行复制 外传 MySQL 主从复制&#xff08;Master-Slave Replication&#xff09;是一个常用的高可用性和可扩展性解决方案。通过主从复…

分享一个基于uniapp+springboot技术开发的校园失物招领小程序(源码、lw、调试)

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人七年开发经验&#xff0c;擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等&#xff0c;大家有这一块的问题可以一起交流&#xff01; &#x1f495;&…

TPU-MLIR——实现Chatglm2-6B大模型移植部署

TPU-MLIR——实现Chatglm2-6B大模型移植部署 本项目实现BM1684X部署语言大模型ChatGLM2-6B。通过TPU-MLIR编译器将模型转换成bmodel&#xff0c;并采用c代码将其部署到BM1684X的PCIE环境&#xff0c;或者SoC环境。 编译chatglm2-6B模型 1. 下载‘Chat-GLM2-6B’ 2. 对该模型…

Python 合并/拆分Excel

python对于合并excel本篇文章给出合并xlsx文件的方法&#xff0c;xls的方法不在本文介绍 拆分数据可以适用于xlsx或xls 合并excel 先读取所有的excel&#xff0c;得到df列表&#xff0c;在将这个df列表 按行进行合并 import pandas as pd# 读取所有xlsx def read_xlsx(xlsx_l…

9月18日,每日信息差

今天是2023年09月19日&#xff0c;以下是为您准备的11条信息差 第一、江苏无锡首次获得6000年前古人类DNA 第二、全球天然钻石价格暴跌。数据显示&#xff0c;国际钻石交易所钻石价格指数在2022年3月达到158的历史峰值&#xff0c;之后一路下跌到目前的110左右&#xff0c;创…

Glide - Android的图像加载和缓存库,专注于平滑滚动

官网 GitHub - bumptech/glide: An image loading and caching library for Android focused on smooth scrolling 项目介绍 An image loading and caching library for Android focused on smooth scrolling Glide is a fast and efficient open source media management a…

谷歌版ChatGPT与旗下邮箱、视频、地图等,实现全面集成!

9月20日&#xff0c;谷歌在官网宣布推出Bard Extensions。借助该扩展用户可在谷歌的Gmail、谷歌文档、网盘、Google 地图、视频等产品中使用Bard。 Bard是谷歌基于PaLM 2大模型&#xff0c;打造的一款类ChatGPT产品&#xff0c;可自动生成文本、代码、实时查询信息等。新的集成…

数据结构与算法(C语言版)P5---栈

1、栈 1.1、栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。__进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。__栈中的数据元素遵守__后进先出&#xff08;先进后出&#xff09;__LIFO&#xf…

iOS 蓝牙连接 connectionSupervisionTimeout 是720ms 还是 2~6s

对比 HCI可以看到iPhone作为主设连接外设时&#xff0c;可以看到&#xff1a; connection Event Interval 30ms&#xff1b; connection Slave Latency 0&#xff1b; connection Supervision Timeout 720ms&#xff1b;但苹果官方文档《 Accessory Design Guidelines for …

FPGA原理与结构(12)——FIFO IP核原理学习

系列文章目录&#xff1a;FPGA原理与结构&#xff08;0&#xff09;——目录与传送门 一、FIFO概述 1、FIFO的定义 FIFO是英文First-In-First-Out的缩写&#xff0c;是一种先入先出的数据缓冲器&#xff0c;与一般的存储器的区别在于没有地址线&#xff0c; 使用起来简单&…

C/C++算法入门 | 简单模拟

不爱生姜不吃醋⭐️ 如果本文有什么错误的话欢迎在评论区中指正 与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 &#x1f334;前言&#x1f334;一、害死人不偿命的&#xff08;3n1&#xff09;猜想1.题目&#xff08;PAT B1001&#xff09;2.思路3.代码实现 &am…

BD就业复习第一天

hive 1.分区分桶 在Hive中&#xff0c;分区&#xff08;Partition&#xff09;和分桶&#xff08;Bucketing&#xff09;都是用于数据管理和查询性能优化的技术。它们有不同的用途和特点。 分区&#xff08;Partition&#xff09;&#xff1a; 定义&#xff1a;分区是将数据…

Hexo在多台电脑上提交和更新

文章目录 1.博客搭建2.创建一个新文件夹new&#xff0c;用于上传hexo博客目录3.github上创建hexo分支并设置为默认分支创建hexo分支将hexo分支设置为默认分支 4.进入新建的文件夹中git clone&#xff0c;再上传相关文件至hexo分支1.clone下来的文件夹内应该有个.gitignore文件&…

Springboot部署服务器项目上线

第一步&#xff0c;项目打包&#xff0c;有两种方式 第一种、直接在项目根目录打开终端&#xff0c;输入以下语句即可。如下图&#xff1a; mvn clean package -DskipTests 第二种、在右侧点击 Maven选项&#xff0c;选择鼠标左键双击package选项即可。如下图&#xff1a; 两…