本文实例讲述了射流研究…实现仿即时通信软件面板的手风琴效果折叠菜单代码。分享给大家供大家参考。具体如下：

这是一款简单实用的垂直导航菜单，有人把这种风格称为"手风琴"菜单，类似仿即时通信软件面板的折叠菜单，鼠标放在任意一个菜单上，它会展开所属的二级菜单，很不错的选择，以前就分享过此类菜单，这次经过了代码优化升级，更人性化了。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-f-qq-sfq-style-menu-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题简单实用的垂直导航菜单/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS '。sv3 dl。sv3 dt。sv3 DD { padd :0margin :0 } . sv3 { width :240 pxborder :1 px }实心# BFC7D9} .sv3 dl { width:240px高度：380 px背景# EDF5FF飞越：隐藏；} . sv3 dt { padd :5 px 10px three 336013 pxfont-size :13 px；color : # 000 background : # e5ec F9 border-top :1 px实心# fff边框-底部：1px实心# BFC7D9}。sv3 dl。在dt {背景： # 3366 cc颜色： # FFF；字体粗细：加粗；} . sv3 DD { padd :10 pxcolor : # 333 font-size :12 px；线高：1.5 em} .sv3 DD a :链接。sv3 DD a :访问过。sv3 DD a :悬停。sv3 DD a :主动{ color : # 333显示：块；向右文本对齐：}/style/head dyh 3简单实用的垂直导航菜单/h3div id=' idSlideView3 ' class=' sv3 ' dl class=' on ' dt网页特效dt/DD导航菜单/dd /dl dl dt层与布局dt/DD内容二/dd /dl dl dt表单相关dt/DD内容三/dd /dl dl dt ASP源码dt/DD内容四/dd /dl dl dt PHP源码dt/DD内容五/DD/dl/div脚本语言=' JavaScript '函数(var r=文档)的幻灯片视图(e)。getelementbyid(e)).getElementsByTagName('dl ')，c=clearInterval，i=-1，p=r[0]，j；j=r[I]；){ j.style.height=(i？24:379)' px '；j . onmouseover=function(){ clear time out(j)；var i=这个；j=setTimeout(函数(){if(p！=i)_(p，379，24)(p=i，24，379)}，200)}；} function _(el，f，t){ c(el .$1);el.className=ft ': ' on返回埃尔.$ 1=setInterval(函数(){ El。风格。高度=(f=数学[英尺？地板' : '天花板]((t-f)*。3))“px”；if (f==t)c(el .$1)},10),_ }};新的幻灯片视图(“idslide view 3”)；/脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。