簡単な折りたたみメニュー
28778 ワード
効果:
コード:
<!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>注:フィレット効果はIE 678を処理していません.