我這個代碼如何實現鼠標選中某個選項后再使用鍵盤選擇時，是從當前鼠標選中的項目開始選擇。而不是重置從第一項開始<!doctype html><html><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{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){??????? // 執行腳本??????? var event=event||window.event;??????? menu.style.display="block";??????? if(event.stopPropagation){??????????? event.stopPropagation();??????? }??????? else{??????????? event.cancelBubble=true;??????? }?? ??? ??? ?document.onkeyup=function(event){?? ??? ??? ?var event=event||window.event;?? ??? ??? ?for(var i=0;i<as.length;i++){?? ??? ??? ??? ?as[i].style.background='none';?? ??? ??? ??? ?}?? ??? ??? ??? ??? ?if(event.keyCode==40){?? ??? ??? ??? ?index=index+1;?? ??? ??? ??? ?if(index>=as.length){?? ??? ??? ??? ??? ?index=0;?? ??? ??? ??? ?}?? ??? ??? ??? ?as[index].style.backgroundColor="#ccc";?? ??? ??? ?}?? ??? ??? ??? ??? ??? ?if(event.keyCode==38){?? ??? ??? ??? ?if(index<=0){?? ??? ??? ??? ??? ?index=as.length;?? ??? ??? ??? ?}?? ??? ??? ??? ?index=index-1;?? ??? ??? ??? ?as[index].style.backgroundColor="#ccc";?? ??? ??? ?} ?? ??? ??? ??? ??? ??? ?if(event.keyCode==13&&index!=-1){?? ??? ??? ??? ?title.innerHTML=as[index].innerHTML;?? ??? ??? ??? ?for(var i=0;i<as.length;i++){?? ??? ??? ??? ??? ?as[i].style.backgroundColor="none"?? ??? ??? ??? ?}?? ??? ??? ??? ?menu.style.display="block";?? ??? ??? ??? ?index=-1;?? ??? ??? ?} ??? ??? ?}?? ?}?? ??? ??? // 滑過滑過、離開、點擊每個選項時????? // 執行腳本??? for(var i=0;i<as.length;i++){?? ??? ?as[i].name=i;??????? as[i].onmouseover=aOver;??????? as[i].onmouseout=aOut;??????? as[i].onclick=aClick;?? ?}??? function aOver(){?? ??? ?for(var i=0;i<as.length;i++){?? ??? ??? ?as[i].style.background='none';?? ??? ?}?? ??? ?index=-1;?? ??? ?this.style.backgroundColor="#ccc";??? }??? function aOut(){??????? this.style.backgroundColor="#fff";??? }??? function aClick(){??????? title.innerHTML=this.innerHTML;??? }?? ???? // 點擊頁面空白處時?????? // 執行腳本??? document.onclick=docClick;??? function docClick(){??????? menu.style.display="none";?? ??? ?for(var i=0;i<as.length;i++){?? ??? ??? ??? ?as[i].style.background='none';?? ??? ?}?? ??? ?index=-1;??? }?}?? </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>
鍵盤事件問題。
玉鴦子
2016-10-07 17:19:05