<!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>