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

这是一款经过精简后的仿即时通信软件折叠菜单代码，以前发过的，不过这个是经过几轮代码精简后的一个版本，而且在各浏览器下的表现也很不错，兼容性没出问题。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-simple-f-QQ-ZD风格-菜单-代码/

具体代码如下：

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' /titleSlideView滑动展示效果/title/header dystyle类型=' 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 div id=' idSlideView3 ' class=' sv3 ' dl dt我的好友dt/DD张三/dd dd王五/dd /dl dl dt业务联系dt/DD李经理/dd /dl dl dt家人dt/DD爸爸/dd dd妈妈/dd /dl dl dt同事dt/DD小赵/dd /dl dl dt讨厌的人dt/DD梅朝风/DD/dl/div脚本函数幻灯片视图(e，a){ for(var i=0，o=document.getElementById(e)).getElementsByTagName('DL ')，d；d=o[I]；)(函数(e，c，m，s，t，k，h){ (s=e.style).高度=(h=23)' px '；e . on mouseover=function(){ t=setTimeout(e . open，200)；} e . onmouseout=function(){ clear time out(t)；} e . open=function(){ if(a==e)return；c(k)；aa。close()；(a=e).类名=' onk=m(函数(){ if(h379)c(k)；else s.height=(h=Math.min(h 30，380))' px '；}, 10);} e . close=function(){ c(k)；e.className=k=m(函数(){ if(h24)c(k)；else s.height=(h=Math.max(h-30，23))' px '；}, 10);} })(d，clearInterval，setInterval)；o[0].open()；}新的slide view(' idslide view 3 ')；/脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。