一个简单的折叠菜单
效果：
代码：
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title> New Document </title> <style type="text/css"> body,ul,li{ maring:0; font-size:12px; padding:0; } ul{ list-style:none; line-height:25px; } #test{ border:1px solid #888; border-radius:5px; width:200px; } dt{ background:#EEE; padding:5px; padding-left:20px; border-bottom:1px solid #CCC; border-top:1px solid #BBB; margin-bottom:-1px; } dt span{ float:right; } dt span:hover{ cursor:pointer; color:red; } dd{ margin-left:25px; } .first-dt{ -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border-top-left-radius:5px; border-top-right-radius:5px; border-top:0; } .last-dt{ -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; margin-bottom:0; border-bottom:none; } </style></head><body> <div id="test"> <dt ><span>隐藏</span>开发资源</dt> <dd> <ul> <li><a href="#">首页</a></li> </ul> </dd> <dt><span>隐藏</span>接入指南</dt> <dd> <ul> <li><a href="#">移动客户端接入</a></li> </ul> </dd> <dt id="last_dt"><span>隐藏</span>开发文档</dt> <dd> <ul> <li><a href="#">应用社区API</a></li> <li><a href="#">二维码API</a></li> <li><a href="#">WO+分享API</a></li> </ul> </dd> </div> <script type="text/javascript"> var dts=document.getElementsByTagName("dt"); for(var i=0,j=dts.length;i<j;i++){ var menu=dts[i].getElementsByTagName("span")[0], nextDD=dts[i].nextSibling; while(nextDD.nodeType != 1){ nextDD=nextDD.nextSibling; } menu.onclick=(function(obj){ return function(){ if(this.innerHTML=="隐藏"){ this.innerHTML ="展开"; obj.style.display="none"; if(this.parentNode.id=="last_dt"){ this.parentNode.className="last-dt"; } } else{ this.innerHTML="隐藏"; obj.style.display="block"; if(this.parentNode.id=="last_dt"){ this.parentNode.className=""; } } } })(nextDD); } </script></body></html>注：圆角效果没有对IE678作处理。
TAG:
