<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#top-list{
width:200px;
overflow: hidden;
margin: 50px auto 0;
background: url(img/down_list_h2_bg.gif) repeat-x;
border: 1px solid #aab4bc;
}
#top-list h2{
width: 200px;
height:25px;
line-height: 25px;
color: #6B7980;
font-size:18px;
cursor: pointer;
}
.up{
background: url(img/up.gif) no-repeat 180px center;
}
.down{
background: url(img/down.gif) no-repeat 180px center;
}
#top-list ul{
width: 200px;
height: 185px;
background: #e9edf2;
display:block;
}
#top-list ul li{
width:200px;
height:30px;
line-height:30px;
color: #6B7980;
list-style:none;
}
</style>
</head>
<body>
<div id="top-list">
<h2 class="up">播放列表</h2>
<ul>
<li>备爱-是阿涵啊</li>
<li>亲爱的-潘玮柏</li>
<li>她-朱婧汐</li>
<li>Angelina-Lou Bega</li>
<li>星星点灯-郑智化</li>
<li>技术改变一切</li>
</ul>
</div>
<script>
window.onload=function(){
var oTop = document.getElementById("top-list");
var oH2 = oTop.getElementsByClassName("up")[0];
var oUl = oTop.getElementsByTagName("ul")[0];
oH2.onclick=function(){
if(oUl.style.display==="none"){
oUl.style.display="block";
oH2.className="up";
}
else{
oUl.style.display="none";
oH2.className="down";
}
}
}
</script>
</body>
</html>
