前端:实现二级菜单（点击实现二级菜单展开）
效果
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>左侧二级菜单实现</title></head><style>* {margin: 0;padding: 0;}/* 取消所有列表的序号 */ul,li {list-style-type: none;}/* 取消所有超链接的下划线 */a {text-decoration-line: none;color: white;}/* 全部样式 */.all_content {display: flex;}/* 左侧导航栏 */.left_nav {background-color: #222d32;width: 10%;height: 100vh;}/* 外层li */.menu-item {padding: 10px;background-color: #222d32;}.submenu {width: 100%;margin-top: 10px;margin-left: -10px;display: none;background-color: #181f23;}.submenu-li {background-color: #181f23;width: 100%;padding: 10px;}.submenu-link:hover {font-weight: 600;}.menu-item.active .submenu {display: block;}/* 右侧内容 */.right_content {width: 90%;}.content {display: none;/* 隐藏所有内容 */}.content.active {display: block;/* 显示被激活的内容 */}.selected {background-color:#4e73df;/* 设置选中状态的背景色 */}
</style><body><div class="all_content"><div class="left_nav"><ul class="menu"><li class="menu-item"><a href="#" class="menu-link">销售</a><ul class="submenu"><li class="submenu-li"><a href="#"class="submenu-link"data-content-id="content1">功能1</a></li><li class="submenu-li"><a href="#"class="submenu-link"data-content-id="content2">报表1</a></li></ul></li><li class="menu-item"><a href="#" class="menu-link">采购</a><ul class="submenu"><li class="submenu-li"><a href="#"class="submenu-link"data-content-id="content3">功能2</a></li><li class="submenu-li"><a href="#"class="submenu-link"data-content-id="content4">报表2</a></li></ul></li></ul></div><div class="right_content"><div id="content1" class="content">功能1的内容</div><div id="content2" class="content">报表1的内容</div><div id="content3" class="content">功能2的内容</div><div id="content4" class="content">报表2的内容</div></div></div><script>// 获取所有一级菜单项var menuItems = document.querySelectorAll('.menu-item');var contents = document.querySelectorAll('.content');// 为每个一级菜单项添加点击事件处理程序menuItems.forEach(function (menuItem) {var menuLink = menuItem.querySelector('.menu-link');var submenu = menuItem.querySelector('.submenu');menuLink.addEventListener('click', function (e) {e.preventDefault();// 关闭其他一级菜单的展开状态menuItems.forEach(function (item) {if (item !== menuItem) {item.classList.remove('active');}});// 切换当前一级菜单的展开状态menuItem.classList.toggle('active');});});// 为每个二级菜单项添加点击事件处理程序var submenuLinks = document.querySelectorAll('.submenu-link');submenuLinks.forEach(function (link) {link.addEventListener('click', function (e) {e.preventDefault();// 移除所有内容的激活状态contents.forEach(function (content) {content.classList.remove('active');});// 获取被点击项对应的内容IDvar contentId = link.getAttribute('data-content-id');// 添加激活状态到对应的内容var activeContent = document.getElementById(contentId);activeContent.classList.add('active');// 关闭其他一级菜单的展开状态menuItems.forEach(function (menuItem) {menuItem.classList.remove('active');});// 保持对应的一级菜单打开link.closest('.menu-item').classList.add('active');// 移除其他二级菜单的选中状态背景色submenuLinks.forEach(function (submenuLink) {submenuLink.parentElement.classList.remove('selected');});// 给选中的二级菜单添加选中状态背景色link.closest('.submenu-li').classList.add('selected');});});</script></body></html>
相关文章：
前端:实现二级菜单（点击实现二级菜单展开）
效果 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, i…...
Spark-java版
SparkContext初始化 相关知识 SparkConf 是SparkContext的构造参数，储存着Spark相关的配置信息，且必须指定Master(比如Local)和AppName（应用名称），否则会抛出异常；SparkContext 是程序执行的入口…...
RabbitMQ消息模型之Work Queues
Work Queues Work Queues，也被称为（Task Queues），任务模型，也是官网给出的第二个模型，使用的交换机类型是直连direct，也是默认的交换机类型。当消息处理比较耗时的时候，可能生产消息…...
vue3+ts 实现时间间隔选择器
需求背景解决效果视频效果balancedTimeElement.vue 需求背景 实现一个分片的时间间隔选择器，需要把显示时间段显示成图表，涉及一下集中数据转换 [“02:30-05:30”,“07:30-10:30”,“14:30-17:30”]‘[(2,5),(7,10),(14,17)]’[4, 5, 6, 7, 8, 9, 10, …...
PTA 魔法优惠券
7-83 魔法优惠券 分数 25 全屏浏览题目 作者 陈越 单位 浙江大学 在火星上有个魔法商店，提供魔法优惠券。每个优惠劵上印有一个整数面值K，表示若你在购买某商品时使用这张优惠劵，可以得到K倍该商品价值的回报！该商店还免费赠送…...
P8A110-A120经典赛题
Web应用程序SQL Inject安全攻防 任务环境说明： 服务器场景：WebServ2003（用户名：administrator；密码：空）服务器场景操作系统：Microsoft Windows2003 Server 服务器场景安装服务/工…...
文件基础知识
计算机中的流：在C语言中将通过输入/输出设备（键盘、内存、显示器、网络等）之间的数据传输抽象表述为“流”。 1、文本流和二进制流 在文本流中输入输出的数据是一系列的字符，可以被修改在二进制流中输入输出数据是一系列字节&am…...
二叉树OJ题之二
今天我们一起来看一道判断一棵树是否为对称二叉树的题，力扣101题， https://leetcode.cn/problems/symmetric-tree/ 我们首先先来分析这道题，要判断这道题是否对称，我们首先需要判断的是这颗树根节点的左右子树是否对称࿰…...
MySql表中添加emoji表情
共五处需要修改。 语句执行修改： ALTER TABLE xxxxx CONVERT TO CHARACTER SET utf8mb4;...
【新手解答1】深入探索 C 语言：变量名、形参 + 主调函数、被调函数 + 类和对象 + 源文件（.c 文件）、头文件（.h 文件）+ 库
C语言的相关问题解答 写在最前面目录 问题1变量名与变量的关系与区别变量和数据类型形参（形式参数）的概念 问题2解析：主调函数和被调函数延伸解析：主调函数对于多文件程序的理解总结 问题3类和对象变量和数据类型变量是否为抽象的…...
2023最新的软件测试热点面试题（答案+解析）
📢专注于分享软件测试干货内容，欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！📢交流讨论：欢迎加入我们一起学习！📢资源分享：耗时200小时精选的「软件测试」资…...
NCo3.1(08) - Nco3 服务器端编程
本篇博文不再重复ABAP调用外部服务器的基础，只介绍 NCo3 开发的过程和要点。需要了解相关知识点的小伙伴们自行参考： SAP接口编程 之JCo3.0系列(06) - Jco服务器端编程 PyRFC 服务器端编程要点 创建项目 新建一个 Console 项目，选择 .Net …...
【代码随想录】算法训练计划36
贪心 1、435. 无重叠区间 题目： 给定一个区间的集合 intervals ，其中 intervals[i] [starti, endi] 。返回 需要移除区间的最小数量，使剩余区间互不重叠 。 思路： 贪心，重叠个数，和射气球一样,重叠区间…...
Python (十五) 面向对象之多继承问题
程序员的公众号：源1024，获取更多资料，无加密无套路！ 最近整理了一波电子书籍资料，包含《Effective Java中文版 第2版》《深入JAVA虚拟机》，《重构改善既有代码设计》，《MySQL高性能-第3版》&…...
广域网加速技术
摘要： 随着企业数字化转型快速发展，越来越多企业将IT系统、应用和服务部署到云上，以实现更高效、灵活的管理和使用。这就对广域网提出了更高的要求，而广域网线路往往存在带宽费用昂贵、服务质量不可靠等问题。为了改善用户体验&am…...
构建智能医患沟通：陪诊小程序开发实战
在医疗科技的浪潮中，陪诊小程序的开发成为改善医患沟通的创新途径之一。本文将介绍如何使用Node.js和Express框架构建一个简单而强大的陪诊小程序，实现患者导诊和医生咨询功能。 1. 安装Node.js和Express 首先确保已安装Node.js，然后使用以…...
插入区间[中等]
优质博文：IT-BLOG-CN 一、题目 给你一个无重叠的 ，按照区间起始端点排序的区间列表。在列表中插入一个新的区间，你需要确保列表中的区间仍然有序且不重叠（如果有必要的话，可以合并区间）。 示例 1&#x…...
Android Bitmap 模糊效果实现 (二)
文章目录 Android Bitmap 模糊效果实现 (二)使用 Vukan 模糊使用 RenderEffect 模糊使用 GLSL 模糊RS、Vukan、RenderEffect、GLSL 效率对比 Android Bitmap 模糊效果实现 (二) 本文首发地址 https://blog.csdn.net/CSqingchen/article/details/134656140 最新更新地址 https:/…...
初识Java 18-4 泛型
目录 泛型存在的问题 在泛型中使用基本类型 实现参数化接口 类型转换和警告 无法实现的重载 基类会劫持接口 自限定类型 奇异递归类型 自限定 自限定提供的参数协变性 本笔记参考自： 《On Java 中文版》 泛型存在的问题 接下来讨论的，是在泛型…...
家政保洁预约小程序app开发特点有哪些？
家政预约服务小程序APP开发的特点介绍； 1. 低成本：用户通过手机APP下单，省去了中介费用，降低了雇主的雇佣成本。 2. 高收入：家政服务人员通过手机APP接单，省去了中介费用，从而提高了服务人员的…...
大语言模型如何处理长文本？常用文本分割技术详解
为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile，新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码： https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币，另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额，返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称：装饰器模式（Decorator Pattern） 👦 小明最近上线了校园奶茶配送功能，业务火爆，大家都在加料： 有的同学要加波霸 🟤，有的要加椰果…...
Sklearn 机器学习 缺失值处理 获取填充失值的统计值
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中，数据清…...