树状菜单(利用映射-bootstrap+jQuery实现折叠功能)

效果(默认全部展开):
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head><style>/* 树状菜单 */#ulShow {height: 100%;}#ulShow > .list-group {color: #fff;margin: 0;height: 40px;line-height: 40px;margin: 0;list-style: none;}/* 一级菜单 */#ulShow > .list-group > .list-group {margin: 0;padding-left: 20px;background-color: #2d363f;}#ulShow > .list-group > .collapse > .list-group {margin: 0;}/* 动画进行时的样式设置,要和动画结束时的样式保持一致 */#ulShow > .list-group > .collapse > .list-group > .list-group-item,#ulShow > .list-group .collapsing .list-group-item {display: flex;align-items: center;padding: 0;padding-left: 40px;background-color: #1e2d3b;border: 0;}#ulShow > .list-group > .collapse > .list-group > .list-group-item a,#ulShow > .list-group .collapsing .list-group-item a {text-decoration: none;color: #fff;}#ulShow > .list-group > .collapse > .list-group > .list-group-item:hover,#ulShow > .list-group .collapsing .list-group-item:hover {background: #2d363f;cursor: pointer;}#ulShow > .list-group > .collapse > .list-group > .list-group-item:hover a,#ulShow > .list-group .collapsing .list-group-item:hover a {color: lightblue;}#ulShow > .list-group .collapsing {transition: height 0.5s ease;/* 修改为你想要的持续时间和缓动函数 *//* 动画加载时会有一个向下的高度占位 *//* background-color: red; */}</style><body><div id="ulShow"></div><script>const menuArray = [{ id: 1, pageName: "用户管理", pid: 0 },{ id: 2, pageName: "图书管理", pid: 0 },{ id: 3, pageName: "销售管理", pid: 0 },{ id: 4, pageName: "借阅管理", pid: 0 },{ id: 5, pageName: "系统设置", pid: 0 },{ id: 6, pageName: "用户类型管理", pid: 1 },{ id: 7, pageName: "用户信息管理", pid: 1 },{ id: 8, pageName: "新增用户", pid: 1 },{ id: 9, pageName: "图书类型管理", pid: 2 },{ id: 10, pageName: "图书管理", pid: 2 },{ id: 11, pageName: "入库管理", pid: 3 },{ id: 12, pageName: "出库管理", pid: 3 },{ id: 13, pageName: "借书管理", pid: 4 },{ id: 14, pageName: "还书管理", pid: 4 },{ id: 15, pageName: "退出", pid: 5 },];function showMenu(menuArray) {// 创建一个映射对象,用于存储菜单项及其子菜单项,map是计算结束后返回的值,是下一次调用回调时的第一个参数;item是当前值const itemMap = menuArray.reduce((map, item) => {// 将每个菜单项添加到映射中,并初始化其子菜单项数组/*在这段代码中,...item 用于对象展开(Object Spreading)是有效的,因为它正确地复制了 item 对象的所有可枚举属性到新创建的对象中。对象展开(Object Spreading)与浅拷贝(Shallow Copy)是相关的概念。在这段代码中,...item 进行的操作实际上是一个浅拷贝。浅拷贝是指创建一个新对象,并将原始对象的所有非静态属性的值复制到新对象中。如果这些属性值是基本类型(如数字、字符串、布尔值),则直接复制值;如果属性值是引用类型(如对象、数组),则复制的是内存中的地址,而不是实际的对象或数组。这意味着新对象和原始对象仍然共享对这些引用类型属性的引用。在对象展开中,...item 创建了一个新对象,并将 item 的所有可枚举属性复制到新对象中。由于这些属性是按值复制的,如果属性是基本类型,它们将被直接复制;如果属性是引用类型(例如,另一个对象或数组),则复制的是对这个引用类型值的引用,而不是实际的对象或数组本身。因此,对象展开在这种情况下执行的是一个浅拷贝。这段代码中的 subItems: [] 创建了一个新的空数组,并将其赋值给新对象的 subItems 属性。这是对新数组的一个独立引用,它不会影响原始 item 对象中的任何属性或数组。因此,当你在这段代码中使用 ...item 时,你正在创建一个新对象,该对象包含原始 item 对象的所有属性的浅拷贝,并且添加了一个新的 subItems 属性,该属性指向一个全新的数组。这样,每个 item 在 itemMap 中都有一个独立的、不与其他 item 共享的 subItems 数组。*/map[item.id] = { ...item, subItems: [] };// 如果菜单项没有父级(顶级菜单项),则标记为顶级if (item.pid === 0) {map[item.id].topLevel = true;} else {// 如果菜单项有父级,则将其添加到父级菜单项的子菜单项数组中const parentId = item.pid;if (map[parentId]) {map[parentId].subItems.push(item);}}return map;}, {});console.log(itemMap, "itemMap");// 从映射中提取所有顶级菜单项,返回一个新数组const topLevelItems = Object.values(itemMap).filter((item) => item.topLevel);// 构建顶级菜单项的 HTML 内容const listGroupContent = topLevelItems.map((topItem) => {let subItemsHtml = "";// 如果顶级菜单项有子菜单项,则构建子菜单项的 HTML 内容if (topItem.subItems.length > 0) {// 为子菜单项创建一个唯一的 collapse IDconst collapseId = `collapse-${topItem.id}`;// 构建子菜单项的列表组,并将其包装在一个 collapse 元素中subItemsHtml =`<div class="collapse" id="${collapseId}">` +`<ul class="list-group list-group-flush">` +topItem.subItems.map((subItem) =>// 将子菜单项转换为 a 标签,并设置 href 属性`<li class="list-group-item subItem" οnclick="handleSubItem('${subItem.pageName}')"><a href="#">${subItem.pageName}</a></li>`).join("") +`</ul>` +`</div>`;// 创建折叠触发器的按钮,并设置 data-target 属性以指向相应的 collapse 元素const triggerButton = `<div class="list-group"  data-toggle="collapse" data-target="#${collapseId}" aria-expanded="false" aria-controls="${collapseId}">${topItem.pageName}</div>`;// 返回顶级菜单项的 HTML 内容,包括折叠触发器和子菜单项return triggerButton + subItemsHtml;} else {// 如果顶级菜单项没有子菜单项,则只创建一个 a 标签return `<li class="list-group-item"><a href="#">${topItem.pageName}</a></li>`;}}).join("");// 清空 ulShow 元素的内容,并添加新构建的列表组内容$("#ulShow").empty().append(`<ul class="list-group">${listGroupContent}</ul>`);// 初始化所有 collapse 元素以启用折叠功能$(".collapse").collapse();}function handleSubItem(pageName) {console.log(pageName, "pageName");}$(".subItem").on("click", function (pageName) {handleSubItem(pageName);});window.onload = function () {showMenu(menuArray);};</script></body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【大厂AI课学习笔记】【1.6 人工智能基础知识】(3)神经网络

深度学习是机器学习中一种基于对数据进行表征学习的算法。观测值(例如一幅草莓照片)可以使用 多种方式来表示&#xff0c;如每个像素强度值的向量&#xff0c;或者更抽象地表示成一系列边、特定形状的区域等。 深度学习的最主要特征是使用神经网络作为计算模型。神经网络模型 …

《Python 网络爬虫简易速速上手小册》第10章:未来展望与新兴技术(2024 最新版)

文章目录 10.1 机器学习在爬虫中的应用10.1.1 重点基础知识讲解10.1.2 重点案例&#xff1a;使用机器学习进行自动化内容抽取10.1.3 拓展案例 1&#xff1a;利用深度学习识别复杂的网页结构10.1.4 拓展案例 2&#xff1a;机器学习辅助的动态反反爬虫策略 10.2 处理 JavaScript …

Python操作MySQL基础

除了使用图形化工具以外&#xff0c;我们也可以使用编程语言来执行SQL从而操作数据库。在Python中&#xff0c;使用第三方库: pymysql来完成对MySQL数据库的操作。 安装第三方库pymysql 使用命令行,进入cmd&#xff0c;输入命令pip install pymysql. 创建到MySQL的数据库连接…

企业飞书应用机器人,使用python发送图文信息到群

企业飞书应用的自动化&#xff0c;需要创建企业应用&#xff0c;应用开通机器人能力&#xff0c;并获取机器人所需的app_id与app_secret&#xff08;这一部分大家可以在飞书的控制台获取&#xff1a;https://open.feishu.cn/api-explorer/&#xff09; 文章目录 步骤1&#xff…

【开源】基于JAVA+Vue+SpringBoot的公司货物订单管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 客户管理模块2.2 商品维护模块2.3 供应商管理模块2.4 订单管理模块 三、系统展示四、核心代码4.1 查询供应商信息4.2 新增商品信息4.3 查询客户信息4.4 新增订单信息4.5 添加跟进子订单 五、免责说明 一、摘要 1.1 项目…

提高效率!企业短信通道账单拆分一键处理,干货分享

**提高效率!企业短信通道账单拆分一键处理,干货分享! 昨天从硬盘里看到2019年写的 账单拆分案列,这里分享给大家 文章目录 **提高效率!企业短信通道账单拆分一键处理,干货分享!背景企业短信通道账单展示干货来了用python拆分短信账号最后短信通道账单拆分后的处理。最后…

微信小程序上传代码教程

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 小程序上传代码到gogs上面来 整体架构流程 小程序也要远程连接仓库&#xff0c;实现代码上传 技术名词解释 微信开发者工具gogs 技术细节 连接gogs仓库地址 微信小程序需要head将本地代码和gogs代码同步 小结 …

hexo 博客搭建以及踩雷总结

搭建时的坑 文章置顶 安装一下这个依赖 npm install hexo-generator-topindex --save然后再文章的上面设置 top: number&#xff0c;数字越大&#xff0c;权重越大&#xff0c;也就是越靠顶部 hexo 每次推送 nginx 都访问不到 宝塔自带的 nginx 的 config 里默认的角色是 …

LayUI中表格树折叠 --

1、先将插件源码进行下载&#xff0c;新建 tableTree.js 文件&#xff0c;将源码放进去 2、将 tableTree.js 文件 配置之后&#xff0c;在需要使用的页面进行引入&#xff1a; layui.define(["tableTree"],function (exports) {var tableTree layui.tableTree;// …

RabbitMQ之五种消息模型

1、 环境准备 创建Virtual Hosts 虚拟主机&#xff1a;类似于mysql中的database。他们都是以“/”开头 设置权限 2. 五种消息模型 RabbitMQ提供了6种消息模型&#xff0c;但是第6种其实是RPC&#xff0c;并不是MQ&#xff0c;因此不予学习。那么也就剩下5种。 但是其实3、4…

python执行js代码

1. Python执行JavaScript代码 假如在爬虫逆向分析时&#xff0c;发现某个js加密算法比较繁琐&#xff0c;用Python还原同样的算法比较费劲。此时&#xff0c;可以不必使用Python还原&#xff0c;而是利用Python去直接调用JavaScript中定义的功能。 想实现Python调用JavaScrip…

svg基础(八)滤镜-feTurbulence(湍流)

feTurbulence&#xff1a;湍流滤镜 湍流滤镜&#xff0c;不稳定气流&#xff0c;能够实现半透明的烟熏或波状图像。 通常用于实现一些特殊的纹理。滤镜利用 Perlin 噪声函数创建了一个图像。噪声在模拟云雾效果时非常有用&#xff0c;能产生非常复杂的质感&#xff0c;利用它可…

Spring Native 解放 JVM

一、Spring Native 是什么 Spring Native可以通过GraalVM将Spring应用程序编译成原生镜像&#xff0c;提供了一种新的方式来部署Spring应用。与Java虚拟机相比&#xff0c;原生镜像可以在许多场景下降低工作负载&#xff0c;包括微服务&#xff0c;函数式服务&#xff0c;非常…

Linux内核有什么之内存管理子系统有什么——基础篇之struct vm_area_struct(2)

接前一篇文章&#xff1a;Linux内核有什么之内存管理子系统有什么——基础篇之struct vm_area_struct&#xff08;1&#xff09; 本文内容参考&#xff1a; linux进程虚拟地址空间 《趣谈Linux操作系统 核心原理篇&#xff1a;第四部分 内存管理—— 刘超》 4.6 深入理解 Li…

绕过安全狗

本节我们想要绕过的安全狗版本为v4.023957 &#xff0c;它是网站安全狗的Apache版。 首先搭建环境。渗透环境选用DVWA漏洞集成环境&#xff0c;下载地址 为http://www.dvwa.co.uk/ 。DVWA是一款集成的渗透测试演练环境&#xff0c;当刚刚入门 并且找不到合适的靶机时&#xff…

【java】笔记10:类与对象——本章练习

题目1&#xff1a; 代码如下&#xff1a; import java.util.Scanner; public class Input{public static void main(String[]args){Circle cnew Circle();PassObject yuannew PassObject();System.out.println("r""\t""times");yuan.printAreas…

阿里云服务器搭建frps实现内网穿透

简介 frp 是一个开源、简洁易用、高性能的内网穿透和反向代理软件&#xff0c;支持 tcp, udp, http, https等协议。官网 服务端运行&#xff0c;监听一个主端口&#xff0c;等待客户端的连接&#xff1b;客户端连接到服务端的主端口&#xff0c;同时告诉服务端要监听的端口和…

c语言游戏实战(4):人生重开模拟器

前言&#xff1a; 人生重开模拟器是前段时间非常火的一个小游戏&#xff0c;接下来我们将一起学习使用c语言写一个简易版的人生重开模拟器。 网页版游戏&#xff1a; 人生重开模拟器 (ytecn.com) 1.实现一个简化版的人生重开模拟器 &#xff08;1&#xff09; 游戏开始的时…

学了很多知识,没多久就忘光了,怎么办?

读了很多书&#xff0c;回想起来&#xff0c;却总是觉得一片空白&#xff0c;想不出究竟留下了些什么&#xff1b; 付费参加了一堆课程&#xff0c;听的时候觉得醍醐灌顶&#xff0c;没过多久却发现都还给了老师&#xff1b; 看文章、听讲座&#xff0c;记了一大堆东西&#xf…

C++引用(内含和指针的对比)

1.引用的概念 概念&#xff1a;引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&#xff0c;编译器不会为引用变量开辟内存空间&#xff0c;它和它引用的变量共用一块内存空间。 类型& 引用变量名(对象名) 引用实体&#xff1b;&#xff08;&这个符…