2023.12.2 做一个后台管理网页(左侧边栏实现手风琴和隐藏/出现效果)

2023.12.2 做一个后台管理网页(左侧边栏实现手风琴和隐藏/出现效果)

网页源码见附件,比较简单,之前用很多种方法实现过该效果,这次的效果相对更好。
实现功能:
(1)实现左侧边栏的手风琴菜单
(2)实现左侧边栏的隐藏的显示
(3)实现左侧边栏切换按钮的动画效果
(4)原生js实现的网页,不使用jquerybootstrap

在这里插入图片描述
在这里插入图片描述
手风琴实现的js代码如下,使用循环的方式比较复杂,可以参考另一文的实现方式
2023.12.1 手风琴菜单的简便实现方式
https://editor.csdn.net/md/?articleId=134759727

        for (i = 0; i < acc.length; i++) {acc[i].addEventListener("click", function () {var activeAcc = document.querySelector(".accordion.active");if (activeAcc && activeAcc !== this) {activeAcc.classList.remove("active");activeAcc.nextElementSibling.style.display = "none";}this.classList.toggle("active");var panel = this.nextElementSibling;if (panel.style.display === "block") {panel.style.display = "none";} else {panel.style.display = "block";}});}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

摩根士丹利:人工智能推动增长

摩根士丹利&#xff08;NYSE&#xff1a;MS&#xff09;将人工智能战略整合到其财富管理业务中&#xff0c;标志着竞争性金融格局迈出了变革性的一步。该公司的人工智能计划&#xff0c;包括与 OpenAI 合作开发人工智能聊天机器人&#xff0c;促进了其财富部门的显着增长。值得…

【数据库】数据库基于封锁机制的调度器,使冲突可串行化,保障事务和调度一致性

封锁使可串行化 ​专栏内容&#xff1a; 手写数据库toadb 本专栏主要介绍如何从零开发&#xff0c;开发的步骤&#xff0c;以及开发过程中的涉及的原理&#xff0c;遇到的问题等&#xff0c;让大家能跟上并且可以一起开发&#xff0c;让每个需要的人成为参与者。 本专栏会定期更…

Linux查看计算机处理器相关的信息

采用命令lscpu。部分结果如下&#xff1a;

MicroPython标准库

MicroPython标准库 arraybinascii(二进制/ASCII转换)builtins – 内置函数和异常cmath – 复数的数学函数collections – 集合和容器类型errno – 系统错误代码gc – 控制垃圾收集器hashlib – 散列算法heapq – 堆队列算法io – 输入/输出流json – JSON 编码和解码math – 数…

详解Spring中BeanPostProcessor在Spring工厂和Aop发挥的作用

&#x1f609;&#x1f609; 学习交流群&#xff1a; ✅✅1&#xff1a;这是孙哥suns给大家的福利&#xff01; ✨✨2&#xff1a;我们免费分享Netty、Dubbo、k8s、Mybatis、Spring...应用和源码级别的视频资料 &#x1f96d;&#x1f96d;3&#xff1a;QQ群&#xff1a;583783…

【开源】基于Vue+SpringBoot的音乐平台

项目编号&#xff1a; S 055 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S055&#xff0c;文末获取源码。} 项目编号&#xff1a;S055&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示 四、核心代码4.1 查询单首…

Vue安装及环境配置详细教程

一、下载node.js 访问node.js官网&#xff1a;Download | Node.js 选择Windows Installer (.msi)的64-bit进行下载。 在E盘新建一个文件夹&#xff0c;取名为nodejs&#xff0c;也可以在其他盘符新建。 在安装node.js时&#xff0c;点击Change...&#xff0c;进行切换盘符安…

使用 STM32 微控制器读取光电传感器数据的实现方法

本文介绍了如何使用 STM32 微控制器读取光电传感器数据的实现方法。通过配置和使用STM32的GPIO和ADC功能&#xff0c;可以实时读取光电传感器的模拟信号并进行数字化处理。本文将介绍硬件连接和配置&#xff0c;以及示例代码&#xff0c;帮助开发者完成光电传感器数据的读取。 …

<JavaEE> 什么是线程安全?产生线程不安全的原因和处理方式

目录 一、线程安全的概念 二、线程不安全经典示例 三、线程不安全的原因和处理方式 3.1 线程的随机调度和抢占式执行 3.2 修改共享数据 3.3 关键代码或指令不是“原子”的 3.4 内存可见性和指令重排序 四、Java标准库自带的线程安全类 一、线程安全的概念 线程安全是指…

无人机助力电力设备螺母缺销智能检测识别,python基于YOLOv7开发构建电力设备螺母缺销小目标检测识别系统

传统作业场景下电力设备的运维和维护都是人工来完成的&#xff0c;随着现代技术科技手段的不断发展&#xff0c;基于无人机航拍飞行的自动智能化电力设备问题检测成为了一种可行的手段&#xff0c;本文的核心内容就是基于YOLOv7来开发构建电力设备螺母缺销检测识别系统&#xf…

spark的安装与使用:一键自动安装

使用shell脚本一键下载、安装、配置spark&#xff08;单机版&#xff09; 1. 把下面的脚本复制保存为/tmp/install_spark.sh文件 #!/bin/bash# sprak安装版本 sprak_version"2.4.0" # sprak安装目录 sprak_installDir"/opt/module" # hadoop安装路径&…

【数组和函数实战: 斗地主游戏】

目录 1. 玩法说明 2. 分析和设计 3. 代码实现 4. 游戏演示1. 玩法说明 一副54张牌,3最小,两个王最大,其实是2,和上面一样从大到小排列 2. 分析和设计 2.1 分析和设计 常量和变量设计 一副牌有54张,有牌的数值和花色,可以分别用两个数组来存储,card为卡牌表示的数值,color为…

Java数据结构之《希尔排序》题目

一、前言&#xff1a; 这是怀化学院的&#xff1a;Java数据结构中的一道难度中等的一道编程题(此方法为博主自己研究&#xff0c;问题基本解决&#xff0c;若有bug欢迎下方评论提出意见&#xff0c;我会第一时间改进代码&#xff0c;谢谢&#xff01;) 后面其他编程题只要我写完…

CGAL的四叉树、八叉树、正交树

四叉树&#xff08;Quadtree&#xff09;&#xff1a;四叉树是一种用于二维空间分割的数据结构。它将一个二维区域划分为四个象限&#xff0c;每个象限进一步细分为四个小块&#xff0c;以此类推。四叉树可以用于空间索引、图形学、地理信息系统&#xff08;GIS&#xff09;等领…

前端打包添加前缀

vue2添加前缀 router的base加上前缀 export default new Router({mode: history, // 去掉url中的#base: privateDeployUrl, // 这里加上前缀scrollBehavior: () > ({y: 0}),routes: constantRoutes })vue.config.js&#xff0c;publicPath属性加上前缀 publicPath: proces…

Kali 修改IP地址和DNS 开启SSH和远程桌面

一、修和IP和DNS 1、打开配置文件 vim /etc/network/interfaces# 加入 auto eth0 iface eth0 inet static address 10.3.0.231 netmask 255.255.255.0 gateway 10.3.0.12、清空网卡配置 ip addr flush dev eth0 3、配置DNS vim /etc/resolv.confnameserver 114.114.114.11…

爬虫-xpath篇

1.xpath的基础语法 表达式描述nodename选中该元素/从根节点选取、或者是元素和元素间的过渡//从匹配选择的当前节点选择文档中的节点&#xff0c;而不考虑它们的位置.选取当前节点…选取当前节点的父节点选取属性text()选取文本 举例&#xff1a; 路径表达式结果html选择html元…

TLS协议握手流程

浅析 TLS&#xff08;ECDHE&#xff09;协议的握手流程&#xff08;图解&#xff09; - 知乎 前言 通过 wireshark 抓取 HTTPS 包&#xff0c;理解 TLS 1.2 安全通信协议的握手流程。 重点理解几个点&#xff1a; TLS 握手流程&#xff1a;通过 wireshark 抓取 HTTPS 包理解…

常用数据预处理方法 python

常用数据预处理方法 数据清洗缺失值处理示例删除缺失值插值法填充缺失值 异常值处理示例删除异常值替换异常值 数据类型转换示例数据类型转换在数据清洗过程中非常常见 重复值处理示例处理重复值是数据清洗的重要步骤 数据转换示例 数据集成示例数据集成是将多个数据源合并为一…

【网络协议】聊聊网络ReadTimeout和ConnectTimeout

在实际的开发中&#xff0c;网络超时是一个比较常见的问题&#xff0c;比如说针对支付系统&#xff0c;超时就需要进行和三方人员进行核对订单状态&#xff0c;是否人工介入处理。 但其实在设计网络框架的时候&#xff0c;一般都有两个超时参数 连接超时参数 ConnectTimeout&am…