zoukankan      html  css  js  c++  java
  • 播放列表的收缩展开

    <!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>
  • 相关阅读:
    centos7 双网口绑定
    centos docker 修改默认存储路径
    Django 操作已经存在的数据库
    package ‘RPMM’ is not available (for R version 3.6.0)
    关于tornado的raise gen.Retuen()
    tornodo学习之路
    关于微信小程序登录机制
    关于微信小程序更新机制
    过渡结束事件
    移动端动效
  • 原文地址:https://www.cnblogs.com/zhaocom/p/7828841.html
Copyright © 2011-2022 走看看