JS下拉列表

效果图:(鼠标移上去背景变白,点击三角,列表隐藏了,箭头朝下)

head部分:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="GB2312">
   <title>Document</title>
   <style type="text/css">
   *{margin: 0;padding: 0;}
   div{margin-left: 300px;margin-top: 100px;}
   #a{
      width: 250px;height: 40px;
      background: #D5D9DB;
      border: 1px solid;
      line-height: 40px;
      cursor: pointer;
   }
   #b li
   {
      width: 250px;height: 40px;
      background: #E9ECF3;
      border: 1px solid;
      line-height: 40px;
      list-style: none;
      position: relative;
      top: -210px;
      cursor: pointer;
   }
   #i
   {
      width: 0px; 
      border-top:none;
      border-right: 10px solid transparent;
      border-bottom:10px solid;
      border-left: 10px solid transparent; 
      position: relative;
      top: -125px;
      left: 220px;
      cursor: pointer;
   }
   </style>
</head>

body部分:

<body>
<div>
   <div id="a">&nbsp;&nbsp;播放列表</div>
   <div id="i"></div>
   <div >
   <ul id="b">
      <li class="ab">&nbsp;&nbsp;玩爱之徒-蔡依林</li>
      <li class="ab">&nbsp;&nbsp;原谅我就是这样的女生-戴佩妮</li>
      <li class="ab">&nbsp;&nbsp;猜不透-丁当</li>
      <li class="ab">&nbsp;&nbsp;自导自演-周杰伦</li>
      <li class="ab">&nbsp;&nbsp;浪漫窝-玄子</li>
      <li class="ab">&nbsp;&nbsp;流年-王菲</li>
   </ul>
   </div>
</div>
</body>
JS部分:
<script type="text/javascript">
   aa=document.getElementById('a');
   bb=document.getElementById('b');
   ii=document.getElementById('i');
   ab=document.getElementsByTagName("li");
   aa.onclick=function()
      {
         if(bb.style.display=="none")
         {bb.style.display="block";}
      else
         {bb.style.display="none";}
      
      if(ii.style.borderBottom=='none'){
                ii.style.borderTop='none';
                ii.style.borderBottom='10px solid black';
            }
            else{ 
                ii.style.borderBottom="none";
                ii.style.borderTop="10px solid black";
            }
        }
        for (var x=0;x<ab.length; x=x+1) 
        {
           ab[x].onmouseover=function () {
                this.style.background="white";
               this.style.textDecoration="underline";
           }
            ab[x].onmouseout=function () {
               this.style.background="#E9ECF3";
              this.style.textDecoration="none";
          }
        }
        

   
   
   
</script>



阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页