下拉菜单鼠标键盘事件代码,Js代码库,德仔网

代码语言

代码分类

【Js】下拉菜单鼠标键盘事件

作者: / 发布于2016/3/15/ 423

<html>
    <head>
        <meta charset="utf-8">
        <title>下拉菜单</title>
<style>
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{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;position:relative;}
#divselect cite i{
    position: absolute;
    width: 0;
    height:0;
    right: 5px;
    top: 7px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid #ccc;}
#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>
    window.onload=function(){
        var box=document.getElementById('divselect'),
            title=box.getElementsByTagName('cite')[0],
            span=title.getElementsByTagName('span')[0],
            aUl=box.getElementsByTagName("ul")[0],
            aS=box.getElementsByTagName("a"),
            index=-1;
        title.onclick=function(event){
            event=event||window.event;
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble=true;
            }
            aUl.style.display='block';
 
            document.onkeyup=function(e){
              e=e || window.event;
              for(var i=0;i<aS.length;i++){
                aS[i].style.background='none';
              }
              // 如果按下了向下方向键
              if(e.keyCode==40){
                 index++;
                 if(index>=aS.length){
                   index=0;
                 }
                 aS[index].style.background="#ccc";
              }
              // 如果按下了向上方向键
              if(e.keyCode==38){
                 if(index<=0){
                   index=aS.length;
                 }
                 index--;   
                 aS[index].style.background="#ccc";      
              }
              // 如果按下了回车键
              if(e.keyCode==13 && index!=-1){
                span.innerHTML=aS[index].innerHTML;
                for(var i=0;i<aS.length;i++){
                  aS[i].style.background='none';
                }
                aUl.style.display='none';
                index=-1;    
              }
            }
        }  
        for(var i=0; aS.length>i; i++){
          aS[i].onmouseover=function(){
            this.style.background='#ccc';
          }
          aS[i].onmouseout=function(){
            this.style.background='none';
          }
          aS[i].onclick=function(){
            span.innerHTML=this.innerHTML;
          }
        }
        //点击空白
        document.onclick=function(){
            aUl.style.display='none';
        }
    }
</script>
    </head>
    <body>
        <div id="divselect">
          <cite><span>请选择分类</span><i></i></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>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

贡献的其它代码Label