您的位置：首页 > 其它

一个简单的折叠菜单

2012-09-17 16:16 483 查看

　　效果：

　　代码：

<!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 class="first-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作处理。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航