前端:实现二级菜单（点击实现二级菜单展开）
效果
代码
<!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. 为什么我们需要关注决策空间的评价指标？ 在传统的多目标优化问题中，我们通常只关注目标空间的性能表现。比如常见的IGD（反转世代距离）和HV（超体积）指标，它们能够很好地衡量解集在目标空间的分…...
EXE Ver 适用于 未安装Python 以及包的Windows OS
上图~EXE Ver END...
软件工程导论简答题速查手册：高频考点+避坑指南（附PDF下载）
软件工程导论高频考点精粹：命题陷阱破解与记忆强化指南 面对软件工程导论考试中纷繁复杂的简答题，许多考生常陷入"知识点背了却不会答题"的困境。这份手册从历年真题大数据中提炼出最高频出现的50个核心考点，采用"命题视角记忆…...
Visio是什么？附安装使用全流程
Visio是什么？ 它是微软出品的专业图表绘制工具，是Office家族里最低调、但也是职场进阶最硬核的成员之一。如果说Excel是处理数字的神，那Visio就是处理逻辑和流程的王者。 安装教程和安装包获取 为什么建议你试试Visio？ 1. 拖拽…...
Godot做2D游戏，角色总‘穿模’或图层错乱？一篇讲透Y-Sorting与碰撞体设置
Godot做2D游戏，角色总‘穿模’或图层错乱？一篇讲透Y-Sorting与碰撞体设置 在开发2D俯视角或斜视角游戏时，角色与场景元素的交互问题常常让开发者头疼。想象这样一个场景：你的主角在森林中穿行，却总是莫名其妙地"漂…...
2026届毕业生推荐的AI学术神器实测分析
Ai论文网站排名（开题报告、文献综述、降aigc率、降重综合对比） TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 在当下的学术环境之中，那样的AI论文网站已然变成了研究辅助方面极具关键作用的工…...
Android手电筒控制全攻略：从基础开关到状态监听（附完整代码）
Android手电筒控制全攻略：从基础开关到状态监听（附完整代码） 在移动应用开发中，手电筒功能看似简单，实则涉及相机硬件控制、状态同步、异常处理等多个技术要点。本文将带你深入Android手电筒控制的完整实现方案&#x…...
Visual C++运行库一站式解决方案：从依赖问题到高效部署
Visual C运行库一站式解决方案：从依赖问题到高效部署 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 定位运行库故障：症状、病因与风险三…...
Anaconda3 2025 面向数据科学安装教程：详细步骤+自定义路径+Navigator启动）
其包含了conda、Python等180多个科学包及其依赖项。Anaconda可以看做Python的一个集成安装，它不仅免去了许多复杂的环境搭建，还内置了许多使用的Python工具 一、安装准备 安装包下载：https://pan.xunlei.com/s/VOpVUmfa4taHwZ-gAYIVqvCuA1?…...
从Llama 3到GPT-4：拆解现代大模型Transformer Block的‘标配’与‘选配’（SwiGLU/Pre-Norm）
从Llama 3到GPT-4：现代大模型Transformer Block的架构进化论 当我们在ChatGPT中输入一个问题，或在Midjourney中生成一幅画作时，背后支撑这些AI能力的核心引擎正是Transformer架构。从2017年原始论文《Attention is All You Need》发表至今&am…...