代码经过精简后的仿QQ折叠菜单代码

</p> <p><title>slideview 滑动展示效果</title> </p> <p>.sv3 dl, .sv3 dt, .sv3 dd{ padding:0; margin:0; }<br /> .sv3 {<br /> width:240px;<br /> border:1px solid #bfc7d9;<br /> }<br /> .sv3 dl {<br /> width:240px;<br /> height:380px;<br /> background:#edf5ff;<br /> overflow:hidden;<br /> }<br /> .sv3 dt {<br /> padding:5px 10px;<br /> height:13px;<br /> font-size:13px;<br /> color:#000;<br /> background:#e5ecf9;<br /> border-top:1px solid #fff;<br /> border-bottom:1px solid #bfc7d9;<br /> }<br /> .sv3 dl.on dt {<br /> background:#3366cc;<br /> color:#fff;<br /> font-weight:bold;<br /> }<br /> .sv3 dd {<br /> padding:10px;<br /> color:#333;<br /> font-size:12px;<br /> line-height:1.5em;<br /> }<br /> .sv3 dd a:link,<br /> .sv3 dd a:visited,<br /> .sv3 dd a:hover,<br /> .sv3 dd a:active { color:#333; display:block; text-align:right;} </p> <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> <p>function slideview(e,a){<br /> for(var i=0,o=document.getelementbyid(e).getelementsbytagname('dl'),d;d=o[i++];)(function(e,c,m,s,t,k,h){<br /> (s=e.style).height=(h=23)+"px";<br /> e.onmouseover=function (){ t=settimeout(e.open,200); }<br /> e.onmouseout=function (){ cleartimeout(t);}<br /> e.open=function(){<br /> if (a==e)return;<br /> c(k); a&&a.close();<br /> (a=e).classname="on";<br /> k=m(function(){ if(h>379)c(k); else s.height=(h=math.min(h+30, 380))+"px"; }, 10);<br /> }<br /> e.close = function(){<br /> c(k); e.classname="";<br /> k=m(function(){ if(h<24)c(k); else s.height = (h=math.max(h-30, 23))+"px"; }, 10);<br /> }<br /> })(d,clearinterval,setinterval);<br /> o[0].open();<br /> }<br /> new slideview( "idslideview3"); </p> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]