DOM事件探秘 5-1 编程挑战代码-原创手记-慕课网

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>下拉菜单</title>
  <style type="text/css">
    body,ul,li{ margin:0; 
      padding:0; 
      font-size:13px;}
    ul,li{
      list-style:none;
    }
    #divselect{
      width:186px; 
      margin:80px auto;
       position:relative; 
       z-index:10000;}
    #divselect cite:after{
      content:"";
      display:block;
      position:absolute;
      right:5px;
      top:3px;}
    #divselect cite{
      width:150px; 
      height:24px;
      line-height:24px; 
      display:block; 
      color:#807a62; 
      cursor:pointer;
      font-style:normal;
      padding-left:4px;
      padding-right:30px; 
      border:1px solid #333333; 
      background:url(xjt.png) no-repeat right center;}
    #divselect ul{
        width:184px;
        border:1px solid #333333; 
        background-color:#ffffff;
        position:absolute; 
        z-index:20000;
        margin-top:-1px;
        display:none;}
    #divselect ul li{height:24px; 
        line-height:24px;}
    #divselect ul li a{
        display:block; 
        height:24px; 
        color:#333333; 
        text-decoration:none; 
        padding-left:10px;
        padding-right:10px;}
    </style>
    <script type="text/javascript">
      window.onload=function(){
       var box=document.getElementById('divselect'),
       title=box.getElementsByTagName('cite')[0],
       menu=box.getElementsByTagName('ul')[0],
       as=box.getElementsByTagName('a'),
       index=-1;

    // 点击三角时
    title.onclick=function(event){
        event = event||window.event;
        if (event.stopPrapogation) {
          event.stopPrapogation();
        }else{
          event.cancelBubble=true;
        }
        menu.style.display="block";
    }  
    // 阻止menu冒泡事件
    // menu.onclick=function(event){
    //     event = event||window.event;
    //     if (event.stopPrapogation) {
    //       event.stopPrapogation();
    //     }else{
    //       event.cancelBubble=true;
    //     }
    // }

   // 滑过滑过、离开、点击每个选项时
    for (var i = 0; i < as.length; i++) {
      as[i].onmouseover=function(){
      if (index>=0) {
      as[index].style.background="#fff";
      index = this.getAttribute("selectid")-1;
      }
        this.style.background="#567";
      }
      as[i].onmouseout=function(){
        this.style.background="#fff";
      }
      as[i].onclick=function(){
        title.innerHTML=this.innerHTML;
        index = this.getAttribute("selectid")-1;
      }
    }
   // 键盘事件
    document.onkeyup=function(event){
      event = event||window.event;
      if (event.keyCode == 38) {  //向上38，向下40，回车13
        menu.style.display="block";
        if (index <= 0 ) {
          index = as.length;
        }
        index--;
        as[index].style.background="#567";
        if (index == as.length-1) {
          as[0].style.background="#fff";
        }else{
        as[index+1].style.background="#fff";
      }
      } 
      else if(event.keyCode == 40){//向下
        menu.style.display="block";
        if (index >= as.length-1 ) {
          index = -1;
        }
        index++;
        as[index].style.background="#567";
        if (index == 0) {
          as[as.length-1].style.background="#fff";
        }else{
        as[index-1].style.background="#fff";
      }
      }
      if(event.keyCode == 13){//回车
        if (index >= 0) {
        title.innerHTML=as[index].innerHTML;
      }
        index=-1;
        menu.style.display="none";
      }
    }

   // 点击页面空白处时
    document.onclick=function(){
      menu.style.display="none";
    } 
    }
   </script>
 </head>
 <body>
   <div id="divselect">
    <cite>请选择分类</cite>
    <ul>
     <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li>
     <li><a href="javascript:;" selectid="2">.NET开发</a></li>
     <li><a href="javascript:;" selectid="3">PHP开发</a></li>
     <li><a href="javascript:;" selectid="4">Javascript开发</a></li>
     <li><a href="javascript:;" selectid="5">Java特效</a></li>
   </ul>
 </div>
</body>
</html>
DOM事件探秘 5-1 编程挑战 代码

DOM事件探秘 5-1 编程挑战代码
