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

实现代码如下所示：

！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以上是本文给大家介绍的框架侧边栏代码，希望对大家有所帮助！同时也非常感谢大家对我们网站的支持！