先给大家展示下实现效果图,如果亲感觉是您想要的效果,请参考本代码。
实现代码如下所示:
!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以上是本文给大家介绍的框架侧边栏代码,希望对大家有所帮助!同时也非常感谢大家对我们网站的支持!