前端:实现二级菜单（点击实现二级菜单展开）
效果
代码
<!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接单，省去了中介费用，从而提高了服务人员的…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
观成科技：隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...
【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）
🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...
成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战
在现代战争中，电磁频谱已成为继陆、海、空、天之后的 “第五维战场”，雷达作为电磁频谱领域的关键装备，其干扰与抗干扰能力的较量，直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器，凭借数字射…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式，自动确定它们的类型。 这一特性减少了显式类型注解的需要，在保持类型安全的同时简化了代码。通过分析上下文和初始值，TypeSc…...
uniapp 实现腾讯云IM群文件上传下载功能
UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中，群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS，在uniapp中实现： 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...
深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向
在人工智能技术呈指数级发展的当下，大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性，吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型，成为释放其巨大潜力的关键所在&…...
链式法则中 复合函数的推导路径 多变量“信息传递路径”
非常好，我们将之前关于偏导数链式法则中不能“约掉”偏导符号的问题，统一使用 二重复合函数： z f ( u ( x , y ) , v ( x , y ) ) \boxed{z f(u(x,y),\ v(x,y))} zf(u(x,y), v(x,y)) 来全面说明。我们会展示其全微分形式（偏导…...