当前位置: 首页 > news >正文

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";}});}

相关文章:

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

2023.12.2 做一个后台管理网页&#xff08;左侧边栏实现手风琴和隐藏/出现效果&#xff09; 网页源码见附件&#xff0c;比较简单&#xff0c;之前用很多种方法实现过该效果&#xff0c;这次的效果相对更好。 实现功能&#xff1a; &#xff08;1&#xff09;实现左侧边栏的手…...

【EMFace】《EMface: Detecting Hard Faces by Exploring Receptive Field Pyramids》

arXiv-2021 文章目录 1 Background and Motivation2 Related Work3 Advantages / Contributions4 Method5 Experiments5.1 Datasets and Metrics5.2 Ablation Study5.3 Comparison with State-of-the-Arts 6 Conclusion&#xff08;own&#xff09; 1 Background and Motivatio…...

详细学习Pyqt5的20种输入控件(Input Widgets)

Pyqt5相关文章: 快速掌握Pyqt5的三种主窗口 快速掌握Pyqt5的2种弹簧 快速掌握Pyqt5的5种布局 快速弄懂Pyqt5的5种项目视图&#xff08;Item View&#xff09; 快速弄懂Pyqt5的4种项目部件&#xff08;Item Widget&#xff09; 快速掌握Pyqt5的6种按钮 快速掌握Pyqt5的10种容器&…...

【JavaEE初阶】Thread 类及常见方法、线程的状态

目录 1、Thread 类及常见方法 1.1 Thread 的常见构造方法 1.2 Thread 的几个常见属性 1.3 启动⼀个线程 - start() 1.4 中断⼀个线程 1.5 等待⼀个线程 - join() 1.6 获取当前线程引用 1.7 休眠当前线程 2、线程的状态 2.1 观察线程的所有状态 2.2 线程状态和状…...

0 NLP: 数据获取与EDA

0数据准备与分析 二分类任务&#xff0c;正负样本共计6W&#xff1b; 数据集下载 https://github.com/SophonPlus/ChineseNlpCorpus/raw/master/datasets/online_shopping_10_cats/online_shopping_10_cats.zip 样本的分布 正负样本中评论字段的长度 &#xff0c;超过500的都…...

159.库存管理(TOPk问题!)

思路&#xff1a;也是tok的问题&#xff0c;与上篇博客思路一样&#xff0c;只不过是求前k个小的元素&#xff01; 基于快排分块思路的代码如下&#xff1a; class Solution { public:int getkey(vector<int>&nums,int left,int right){int rrand();return nums[r%…...

【开源】基于Vue+SpringBoot的康复中心管理系统

项目编号&#xff1a; S 056 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S056&#xff0c;文末获取源码。} 项目编号&#xff1a;S056&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员…...

设计模式总览

一、设计模式 介绍 种一棵树最好的时间是十年前&#xff0c;其次是现在 《援助的死亡》-- 比萨莫约 The best time to plant a tree was 10 years ago。 The second best time is now。 《dead aid》-- Dambisa Moyo 1、创建型模式 1.1、单例模式 确保一个类最多只有一个实…...

数据链路层之VLAN基本概念和基本原理

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…...

UVA11729 Commando War

UVA11729 Commando War 题面翻译 突击战 你有n个部下&#xff0c;每个部下需要完成一项任务。第i个部下需要你花Bj分钟交代任务&#xff0c;然后他就会立刻独立地、无间断地执行Ji分钟后完成任务。你需要选择交代任务的顺序&#xff0c;使得所有任务尽早执行完毕&#xff08…...

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

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

大文件分片上传、分片进度以及整体进度、断点续传(一)

大文件分片上传 效果展示 前端 思路 前端的思路&#xff1a;将大文件切分成多个小文件&#xff0c;然后并发给后端。 页面构建 先在页面上写几个组件用来获取文件。 <body><input type"file" id"file" /><button id"uploadButton…...

Pytest 的小例子

一个简单的例子 下面代码保存到test_pytest.py 一个简单的例子 def inc(x):return x 1def test_answer():assert inc(3) 5def test_ask():assert inc(4) 5 pytest 需要安装一下 pip install pytest (Venv) D:\pythonwork>pip install pytest Collecting pytestDown…...

大数据(十一):概率统计基础

专栏介绍 结合自身经验和内部资料总结的Python教程,每天3-5章,最短1个月就能全方位的完成Python的学习并进行实战开发,学完了定能成为大佬!加油吧!卷起来! 全部文章请访问专栏:《Python全栈教程(0基础)》 再推荐一下最近热更的:《大厂测试高频面试题详解》 该专栏对…...

web前端之TypeScript

MENU typescript类型别名、限制值的大小typescript使用class关键字定义一个类、static、readonlytypescript中class的constructor(构造函数)typescript中abstractClass(抽象类)、extends、abstracttypescript中的接口、type、interfacetypescript封装属性、public、private、pr…...

计网Lesson6 - IP 地址分类管理

文章目录 1. I P IP IP 地址定义2. I P v 4 IPv4 IPv4 的表示方法2.1 I P v 4 IPv4 IPv4 的分类编址法2.2 I P v 4 IPv4 IPv4 的划分子网法2.2.1 如何划分子网2.2.2 如何确定子网的借位数2.2.3 总结2.2.4 题目练习 2.3 I P v 4 IPv4 IPv4 的无分类编址法 1. I P IP IP 地…...

Nat. Mach. Intell. | 预测人工智能的未来:在指数级增长的知识网络中使用基于机器学习的链接预测

今天为大家介绍的是来自Mario Krenn团队的一篇论文。一个能够通过从科学文献中获取洞见来建议新的个性化研究方向和想法的工具&#xff0c;可以加速科学的进步。一个可能受益于这种工具的领域是人工智能&#xff08;AI&#xff09;研究&#xff0c;近年来科学出版物的数量呈指数…...

MySQL海量数据配置优化教程

1.缓存大小调整 缓存是数据库中用于减少磁盘 I/O 操作的重要机制。通过增加缓存大小&#xff0c;可以减少对磁盘的访问&#xff0c;从而提高查询性能。 可以使用 innodb_buffer_pool_size 参数来调整 InnoDB 缓存的大小。例如&#xff0c;将缓存大小设置为服务器内存的 70% my…...

Mac-idea快捷键操作

–以下是程序员在Mac中常用的快捷键 弹出程序坞ctrol f3 窗口满屏&#xff0c;半屏 ctrol command f 切换同一个程序的窗口 command ~ 打开最小化窗口 command tab option 拷文件路径 command option c 显示隐藏文件command shift . 显示所有窗口 control 向上箭头 chrome 全屏…...

HarmonyOS脚手架:UI组件之文本和图片

前言 关于HarmonyOS脚手架&#xff0c;本篇是系列的第二篇&#xff0c;主要实现UI组件文本和图片的常见效果查看&#xff0c;本身功能特别的简单&#xff0c;其目的也是很明确&#xff0c;方便大家根据效果查看相关代码实现&#xff0c;可以很方便的进行复制使用&#xff0c;当…...

AI人体骨骼关键点检测:5分钟快速部署,33个关节点一键可视化

AI人体骨骼关键点检测&#xff1a;5分钟快速部署&#xff0c;33个关节点一键可视化 1. 引言&#xff1a;快速体验人体姿态检测 人体骨骼关键点检测技术正在改变我们与计算机交互的方式。想象一下&#xff0c;你的电脑能够实时理解你的每一个动作——从简单的举手到复杂的舞蹈…...

高效医学知识图谱构建方案:CMeKG工具自动化处理中文医学文本技术深度解析

高效医学知识图谱构建方案&#xff1a;CMeKG工具自动化处理中文医学文本技术深度解析 【免费下载链接】CMeKG_tools 项目地址: https://gitcode.com/gh_mirrors/cm/CMeKG_tools 在医疗信息化与人工智能深度融合的今天&#xff0c;中文医学知识图谱构建面临严峻的技术挑…...

根据以上内容,可拟定的标题为:“MATLAB仿真复现光纤激光器中耗散孤子共振DSR的演化过程:...

MATLAB仿真复现耗散孤子共振DSR 根据谱方法求解复立方五次方金兹堡朗道方程 获得光纤激光器中耗散孤子的演化过程耗散孤子共振光纤激光器仿真平台&#xff1a;从 Ginzburg-Landau 方程到多维度脉冲演化分析—— 一套可扩展、可配置、可动画的 MATLAB 谱方法框架一、背景与需求高…...

小白也能玩转AI翻译:translategemma图文翻译快速入门指南

小白也能玩转AI翻译&#xff1a;translategemma图文翻译快速入门指南 1. 认识translategemma&#xff1a;你的私人翻译助手 translategemma-12b-it是Google基于Gemma 3模型开发的开源翻译模型&#xff0c;它能同时处理文本和图片中的文字翻译。想象一下&#xff0c;你正在国外…...

League Akari:英雄联盟玩家的终极智能工具箱 - 3大核心功能深度解析

League Akari&#xff1a;英雄联盟玩家的终极智能工具箱 - 3大核心功能深度解析 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 还在为英雄联盟…...

基于S7-200 PLC与组态王技术的温室大棚控制方案:包含梯形图原理图、IO分配及组态画面详解

基于S7-200 PLC和组态王温室大棚控制 我们主要的后发送的产品有&#xff0c;带解释的梯形图接线图原理图图纸&#xff0c;io分配&#xff0c;组态画面菜农张叔上周还给我打电话吐槽&#xff1a;“小王啊&#xff0c;上周那场降温加突然转晴&#xff0c;我三点爬起来盖半层棉被…...

IQR四分位数法是什么?

一、核心概念&#xff1a;四分位数与IQR1. 四分位数&#xff08;Quartiles&#xff09;将一组有序数据&#xff08;从小到大排列&#xff09;划分为4个相等部分的三个关键分割点&#xff0c;分别记为&#xff1a;Q1&#xff08;第一四分位数&#xff0c;25%分位数&#xff09;&…...

Go Context 取消信号传播机制剖析

Go Context 取消信号传播机制剖析 在并发编程中&#xff0c;如何优雅地控制协程的生命周期是一个关键问题。Go语言通过Context机制提供了一种统一的取消信号传播方式&#xff0c;使得跨协程、跨层级的任务取消变得简单高效。本文将深入剖析Context的取消信号传播机制&#xff…...

告别重复造轮子:用快马平台高效生成ibbot开发脚手架与核心模块

今天想和大家分享一个提升ibbot开发效率的实用技巧。作为一个经常需要开发对话机器人的程序员&#xff0c;我发现每次从零开始搭建项目结构、编写基础模块特别耗时。最近尝试用InsCode(快马)平台生成项目脚手架&#xff0c;效果出乎意料的好。 项目结构自动生成 平台能根据自然…...

renren-fast-vue系统配置中心使用指南:灵活配置与动态切换

renren-fast-vue系统配置中心使用指南&#xff1a;灵活配置与动态切换 【免费下载链接】renren-fast-vue renren-fast-vue基于vue、element-ui构建开发&#xff0c;实现renren-fast后台管理前端功能&#xff0c;提供一套更优的前端解决方案。 项目地址: https://gitcode.com/…...