当前位置: 首页 > 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";}});}
http://www.lryc.cn/news/251139.html

相关文章:

  • 【EMFace】《EMface: Detecting Hard Faces by Exploring Receptive Field Pyramids》
  • 详细学习Pyqt5的20种输入控件(Input Widgets)
  • 【JavaEE初阶】Thread 类及常见方法、线程的状态
  • 0 NLP: 数据获取与EDA
  • 159.库存管理(TOPk问题!)
  • 【开源】基于Vue+SpringBoot的康复中心管理系统
  • 设计模式总览
  • 数据链路层之VLAN基本概念和基本原理
  • UVA11729 Commando War
  • 【数据库】数据库基于封锁机制的调度器,使冲突可串行化,保障事务和调度一致性
  • 大文件分片上传、分片进度以及整体进度、断点续传(一)
  • Pytest 的小例子
  • 大数据(十一):概率统计基础
  • web前端之TypeScript
  • 计网Lesson6 - IP 地址分类管理
  • Nat. Mach. Intell. | 预测人工智能的未来:在指数级增长的知识网络中使用基于机器学习的链接预测
  • MySQL海量数据配置优化教程
  • Mac-idea快捷键操作
  • HarmonyOS脚手架:UI组件之文本和图片
  • 详细学习Pyqt5中的6种按钮
  • 【工具】Zotero|使用Zotero向Word中插入引用文献(2023年)
  • 利用Python爬虫爬取豆瓣电影排名信息
  • 灯光开不了了,是不是NVIDIA的问题
  • 线性可分SVM摘记
  • LabVIEW在调用image.cpp或drawmgr.cpp因为DAbort而崩溃
  • nodejs微信小程序+python+PHP贵州旅游系统的设计与实现-计算机毕业设计推荐MySQL
  • WebUI自动化学习(Selenium+Python+Pytest框架)003
  • python+Appium自动化:python多线程多并发启动appium服务
  • 【计算机网络笔记】802.11无线局域网
  • 用C++和python混合编写数据采集程序?