当前位置: 首页 > 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;当…...

ElevenLabs葡萄牙语语音优化黄金7步法:含音频波形对比图、MOS评分提升路径与合规性审查checklist

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs葡萄牙语语音优化的底层逻辑与技术边界 ElevenLabs 对葡萄牙语&#xff08;尤其是巴西葡萄牙语&#xff0c;pt-BR&#xff09;的语音合成并非简单地复用英语模型微调&#xff0c;而是基于多阶…...

基于意图与技能解耦的智能对话系统构建指南

1. 项目概述&#xff1a;一个意图与技能驱动的AI对话引擎最近在折腾AI应用开发&#xff0c;特别是对话型AI助手时&#xff0c;发现一个核心痛点&#xff1a;如何让AI不仅能理解用户说了什么&#xff08;意图识别&#xff09;&#xff0c;还能精准地调用相应的功能&#xff08;技…...

Nixtla时间序列预测生态:从统计模型到深度学习的统一实践

1. 项目概述&#xff1a;时间序列预测的“瑞士军刀”如果你正在处理时间序列数据&#xff0c;无论是销售预测、服务器监控、还是能源消耗分析&#xff0c;那么你很可能听说过或正在使用一些经典的库&#xff0c;比如statsmodels、prophet&#xff0c;或者更现代的深度学习框架。…...

Cursor-Tap插件:一键AI代码重构与文档生成实战指南

1. 项目概述&#xff1a;一个为 Cursor 编辑器注入灵魂的插件如果你和我一样&#xff0c;日常重度依赖 Cursor 这款 AI 驱动的代码编辑器&#xff0c;那你一定体会过那种“就差一点”的微妙感受。Cursor 的 AI 能力确实强大&#xff0c;但它的交互方式有时会让人感觉像是在和一…...

详解C++作用域与生命周期

Pascal之父Nicklaus Wirth曾经提出一个公式&#xff0c;展示出了程序的本质&#xff1a;程序算法数据结构。后人又给出一个公式与之遥相呼应&#xff1a;软件程序文档。这两个公式可以简洁明了的为我们展示程序和软件的组成。程序的运行过程可以理解为算法对数据的加工过程&…...

μSR技术中的双量子Rabi振荡优化与应用

1. 实验背景与核心原理 在量子物理和凝聚态物理研究中&#xff0c;μ子自旋共振&#xff08;μSR&#xff09;技术是一种独特的探测手段。这项技术利用正μ子&#xff08;μ&#xff09;作为微观探针&#xff0c;通过观测其自旋极化行为来研究材料的局部磁环境。当μ子注入样品…...

Wedecode:全平台微信小程序源代码反编译与安全审计终极指南

Wedecode&#xff1a;全平台微信小程序源代码反编译与安全审计终极指南 【免费下载链接】wedecode 全自动化&#xff0c;微信小程序 wxapkg 包 源代码还原工具, 线上代码安全审计&#xff0c;支持 Windows, Macos, Linux 项目地址: https://gitcode.com/gh_mirrors/we/wedeco…...

AI智能体分类学:从原理到实践,构建高效Agent系统的设计指南

1. 项目概述与核心价值最近在折腾AI智能体&#xff08;Agent&#xff09;相关的项目&#xff0c;发现一个挺有意思的现象&#xff1a;大家聊起Agent&#xff0c;要么是“它能帮我写代码”&#xff0c;要么是“它能自动处理客服”&#xff0c;但很少有人能系统地说清楚&#xff…...

NoC路由设计与缓存一致性协议的协同优化

1. 项目概述&#xff1a;缓存一致性对NoC路由设计的挑战与机遇在当今多核处理器架构中&#xff0c;片上网络(NoC)作为核心间通信的基础设施&#xff0c;其设计质量直接影响整体系统性能。我曾在一次芯片设计项目中深刻体会到&#xff0c;当核心数量增加到64个时&#xff0c;传统…...

新手必看!CTFShow文件上传靶场通关保姆级教程(Web151-170全解析)

CTFShow文件上传靶场全解析&#xff1a;从入门到精通的实战指南 初识文件上传漏洞 文件上传功能几乎是每个Web应用都具备的基础模块&#xff0c;但恰恰是这个看似简单的功能&#xff0c;成为了无数安全漏洞的温床。在CTF竞赛中&#xff0c;文件上传类题目因其直观性和实战性&am…...