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;促进了其财富部门的显着增长。值得…

MuleSoft 中的细粒度与粗粒度 API

API 设计是一个令人着迷的话题。API 设计的一个重要方面是根据 API 的特性和功能确定正确的“大小”。所有建筑师都必须在某个时候解决过这个问题。在本文中&#xff0c;我将尝试对我们在获得“正确的”粒度 API 之前需要考虑的各种参数进行一些深入的探讨&#xff1a; 可维护…

Doris 数据导入四:Binlog Load 方式

Binlog Load提供了一种使Doris增量同步用户在Mysql数据库的对数据更新操作的CDC(Change Data Capture)功能。 1 适用场景 INSERT/UPDATE/DELETE支持。 过滤Query。 暂不兼容DDL语句。 2 基本原理 在第一期的设计中,Binlog Load需要依赖canal作为中间媒介,让canal伪造成一个…

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

封锁使可串行化 ​专栏内容&#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标准库自带的线程安全类 一、线程安全的概念 线程安全是指…

vue3高雅的使用useDialog

在Vue 3中&#xff0c;我们可以使用useDialog自定义指令来高雅地实现对话框的功能。以下是一个简单的示例&#xff1a; 首先&#xff0c;我们需要创建一个名为useDialog.js的文件&#xff0c;并在其中定义我们的自定义指令&#xff1a; // useDialog.js import { ref } from …

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

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

Android 13 - Media框架(21)- ACodec(三)

这一节我们将继续来学习 ACodec 的剩余部分。 enum {kFlagIsSecure 1,kFlagPushBlankBuffersToNativeWindowOnShutdown 2,kFlagIsGrallocUsageProtected 4,kFlagPreregisterMetadataBuffers 8,};enum {kVi…

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

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

测试类运行失败:TestEngine with ID ‘junit-jupiter‘ failed to discover tests

背景&#xff1a;原本我的项目是可以运行的&#xff0c;然后我用另外一台电脑拉了下来&#xff0c;也是可以用的&#xff0c;但是很奇怪&#xff0c;用着用着就不能用了。报了以下错误&#xff1a; /Library/Java/JavaVirtualMachines/openjdk-11.jdk/Contents/Home/bin/java …

org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder 实现密码加密 验证 代码示例

BCryptPasswordEncoder 是 Spring Security 提供的用于加密和验证密码的实现类。它使用强大的 BCrypt 散列函数来存储密码的散列值&#xff0c;提供了一种安全的密码存储方法。以下是一个简单的示例代码&#xff0c;演示如何使用 BCryptPasswordEncoder 进行密码加密和验证&…

索引器【C#】

索引&#xff1a; 索引&#xff0c;索的是实例化的编号&#xff0c;派生的子类&#xff0c;第 [ N ] 个儿子。 用数组的方式访问实例。 返回的是实例的&#xff0c;一个属性值。 声明&#xff1a; this [ 索引 ] public string this[int index]{get{}set{}}pub…

idea 插件开发日志绑定问题

错误日志 Searchable options index builder completed SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/D:/gradle/caches/modules-2/files-2.1/com.jetbrains.intellij.idea/ideaIC/2021.2/b0727ceddea2b62b16825db9308e14a470198…

【QT5】QT5安装

QT5的安装 从软件开发的角度看&#xff0c;选择版本最新的稳定版是最佳选择&#xff0c;目前QT已经开发到QT6了&#xff0c;但是自从QT5最后一个版本QT5.15起&#xff0c;QT官方就不再提供离线安装包了&#xff0c;安装最新版本的QT除了要注册账号等麻烦的操作外&#xff0c;Q…