前端:实现二级菜单（点击实现二级菜单展开）
效果
代码
<!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接单，省去了中介费用，从而提高了服务人员的…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接：A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...
SpringCloudGateway 自定义局部过滤器
场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...