手机版

jQuery侧边栏实现代码

时间:2021-11-01 来源:互联网 编辑:宝哥软件园 浏览:

先给大家展示下实现效果图,如果亲感觉是您想要的效果,请参考本代码。

这里写图片描述

实现代码如下所示:

!DOCTYPE html html heartheta charset=' utf-8 ' TItle JAVAScript菜单侧边展开(改良版)/title/head dyul id=' navigation ' lia href=' # '系统管理/aullia href='# '地区设置/a/lilia href='# '分行设置/a/lilia href='# '银行操作用户设置/a/lilia href='# '密码修改/a/li/ul/lilia href='# '学校管理/aullia href='# '学校设置/a/lilia href='# '学校查询/a/li/ul/lilia href='# '基础信息管理/a/lilia href='# '统计系统查询/a/Li/ulscript src=' http : jquery-1。11 .1 .js '/script脚本var $ j=jquery。noconfiglict();$ j(function(){ var lis=document。getelementbyid('导航').getElementsByTagName(' Li ');for(var I=0;长度;i ) {lis[i].onmouseover=function(){ var subscribe=this。getelementsbytagname(' ul ')[0];子菜单。子菜单. style . display=' block var subcolor=this。getelementsbytagname(' a ')[0];子颜色。风格。背景='浅蓝色';}lis[i].onmouseout=function(){ var subscribe=this。getelementsbytagname(' ul ')[0];子菜单。子菜单. style . display=' none var subcolor=this。getelementsbytagname(' a ')[0];子颜色。风格。背景=' ';}}});/script script src=' http : jquery-1。11 .1 .js '/脚本/正文/html以上是本文给大家介绍的框架侧边栏代码,希望对大家有所帮助!同时也非常感谢大家对我们网站的支持!

版权声明:jQuery侧边栏实现代码是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。