首页手记 JS 实现下拉菜单选择（支持鼠标、键盘同时触发事件）

JS 实现下拉菜单选择（支持鼠标、键盘同时触发事件）

标签：

JavaScript

html:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/main.js"></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>

main.css:

*{ 
    margin:0; 
    padding:0; 
    font-size:14px;
}
ul,li{
    list-style:none;
}
#divselect{
    width:186px; 
    margin:80px auto; 
    position:relative;
    z-index:10000;
}
#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; 
}
#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;
}

main.js

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;
      //显示下拉菜单
      menu.style.display = 'block';
      /*阻止点击事件传播：
          防止点击下拉菜单中的每一项时(ul->li->a),事件逐级传递到document，
          执行了document.onclick  中的 menu.style.display = 'none'语句,
          导致下拉菜单无法显示。*/
      if(event.stopPropagation){
        event.stopPropagation();
      }else{
        event.cancelBubble = true;
      }
      //添加键盘事件
      document.onkeyup = keyEvent;
  }  
    function keyEvent(e){
       e=e || window.event;
       //按了向下键,index递增，当 index>=菜单选项的总数 时,index = 0
       if(e.keyCode== 40){
          index++;
          if(index>=as.length){
            index = 0;
          }
          console.log(index);
          //先清空背景色
          clearBGC();
          //根据index,设置背景色
          as[index].style.background="#ccc";
       }
       //按了向上键，若index<=0,则设为菜单选项的总数-1(下标从0开始)，之后递减index
       else if(e.keyCode== 38){
          index--;
          if(index<0){
            index = as.length-1;
          }
          console.log(index);
          clearBGC();
          as[index].style.background="#ccc";
       }
       //按下ENTER键
       else if(e.keyCode == 13 && index != -1){
          title.innerHTML = as[index].innerHTML;
          menu.style.display = 'none'; 
          //列表隐藏后，取消键盘事件
          document.onkeyup = null;
          clearBGC();
          index = -1;
       }  
    }
    //清空背景色
    function clearBGC(){
      for (var i = 0,len= as.length; i < len; i++) {
        as[i].style.background = "#FFF";
      }
    }

   // 鼠标滑过、离开、点击每个选项时

    for (var i = 0,len= as.length; i < len; i++) {
        //滑过
        as[i].onmousemove = function(){
            //鼠标滑过时改变index的值
            index = this.getAttribute('selectid')-1;
            clearBGC();
            this.style.background = "#CCC";
        };
        //离开
        as[i].onmouseout = function(){
          this.style.background = "#FFF";
        };
        //点击
        as[i].onclick = function(){
          title.innerHTML = this.innerHTML;//这里不需要编写代码隐藏ul,可通过事件冒泡解决。
        };
    }
   // 点击页面空白处时
   document.onclick = function(){
      menu.style.display = 'none'; 
       //取消键盘事件
      document.onkeyup = null;
   }
 }

点击查看更多内容