實現思路：
(1)創建一個列表和一個span之類的標簽（那個標簽都可以），
(2)列表的每一項分別綁定點擊事件，點擊那一項就把span內容變為改那一項內容，然后隱藏列表。
(3)列表要先隱藏，點擊span標簽再讓它顯示，什么都不選時點擊document隱藏列表。
(4)鍵盤上的按鍵都有各自的鍵碼，通過這個鍵碼可以來判斷按下的是哪個鍵來執行相應的操作，下面函數可以獲取鍵盤的鍵碼
document.addEventListener("keyup",function(e){
console.log(e.keyCode)
})
核心代碼：鍵盤上的向上，向下，enter鍵觸發的內容
//鍵盤按下事件 document.addEventListener("keyup",function(e){ var e=e||window.e; reset() //向上鍵 if(e.keyCode=="38"){ index--; if(index<0){ index=list.length-1 } } //向下鍵 if(e.keyCode=="40"){ index++; if(index>list.length-1){ index=0 } } //enter確認鍵 if(e.keyCode=="13"){ cite.innerHTML=list[index].innerHTML; ul.style.display="none"; return ; } list[index].className="bg"; })
全部代碼：
<!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 { 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; } .divselect ul li:hover{ background: #eee; } .bg{ background: #eee; } </style> </head> <body> <div class="divselect"> <span>請點擊選擇分類</span> <ul> <li> <a href="javascript:;">ASP開發</a> </li> <li> <a href="javascript:;">.NET開發</a> </li> <li> <a href="javascript:;">PHP開發</a> </li> <li> <a href="javascript:;">Javascript開發</a> </li> <li> <a href="javascript:;">Java特效</a> </li> </ul> </div> <script type="text/javascript"> var cite=document.querySelector("span"),//選擇的內容 ul=document.querySelector("ul"),//列表 list=document.querySelectorAll("a"),//選擇項 index=-1;//索引 //點擊列表顯示 cite.addEventListener("click",function(e){ var e=e||window.e; e.stopPropagation();//阻止冒泡防止觸發document上綁定的隱藏事件 ul.style.display="block"; }) //給每個列表項綁定點擊 for(var i=0;i<list.length;i++){ list[i].onclick=function(){ cite.innerHTML=this.innerHTML; ul.style.display="none";//這里隱藏可以不寫，不寫冒泡到document上觸發document上的隱藏事件 } } //鍵盤按下事件 document.addEventListener("keyup",function(e){ var e=e||window.e; reset() //向上鍵 if(e.keyCode=="38"){ index--; if(index<0){ index=list.length-1 } } //向下鍵 if(e.keyCode=="40"){ index++; if(index>list.length-1){ index=0 } } //enter確認鍵 if(e.keyCode=="13"){ cite.innerHTML=list[index].innerHTML; ul.style.display="none"; return ; } list[index].className="bg"; }) //未選擇時點擊document隱藏 document.addEventListener("click",function(){ ul.style.display="none"; }) //樣式重置 function reset(){ for(var i=0;i<list.length;i++){ list[i].className=""; } } </script> </body> </html>