播放列表的收缩展开 

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

 

posted @ 2017-11-13 23:23  赵翔个人博客  阅读(257)  评论(0)    收藏  举报