雖然寫出來了但是有個bug看在坐有沒有大神能幫忙解決一下
window.onload=function(){
var?box=document.getElementById('divselect'),
????title=box.getElementsByTagName('cite')[0],
????menu=box.getElementsByTagName('ul')[0],
????as=box.getElementsByTagName('a'),
????????index=-1,
flog=0;
???
????//?點擊三角時
????title.onclick=spread;
????
???//?滑過滑過、離開、點擊每個選項時
for(var?i=0;i<as.length;i++){
???as[i].onmouseover=gray;
????as[i].onmouseout=bland;
as[i].onclick=cli;
document.onkeyup=choose;
}
???
???//?點擊頁面空白處時
???document.onclick=Close;
function?choose(event){
event=event?||window.event;
if(index<-1){
index=as.length;
}else?if(index>as.length){
index=-1;
}else{
menu.style.display="block";
}
if(event.keyCode==40){
index+=1;
for(var?j=0;j<as.length;j++){
as[j].style.backgroundColor="#FFF";
}
as[index].style.backgroundColor="#ccc";
}else?if(event.keyCode==38){
index-=1;
for(var?j=0;j<as.length;j++){
as[j].style.backgroundColor="#FFF";
}
as[index].style.backgroundColor="#ccc";
}else?if(event.keyCode==13){
title.innerHTML=as[index].innerHTML;
menu.style.display="none";
}
}
function?cli(){
title.innerHTML=this.innerHTML;
}
function?bland(){
this.style.backgroundColor="#FFF";
???}
function?gray(){
this.style.backgroundColor="#ccc";
???}???
function?spread(event){
??????event=event?||window.event;
??if(flog==0){
??menu.style.display="block";
??flog=1; ??
??}else{
??menu.style.display="none";
??flog=0;??
??}
??if(event.stopPropagation()){
??event.stopPropagation();
??}else{
event.cancelBubble();??
}
??//?執行腳本
}?
function?Close(){
???????//?執行腳本
???menu.style.display="none"; ???
}?
?}就是鍵盤選擇的時候,按到頭(最上或者最下)就需要再按兩下才能接上,這個問題我也知道出在哪,判斷index時,如果是4就會有問題了,所以需要按兩下。但是以目前水平確實沒有好的辦法
2017-06-05
你的 index 判斷那部分寫的有些不合理,你看看我的,判斷其實沒那么麻煩
window.onload?=?function()?{ ????var?box?=?document.getElementById('divselect'), ????????title?=?box.getElementsByTagName('cite')[0], ????????menu?=?box.getElementsByTagName('ul')[0], ????????as?=?box.getElementsByTagName('a'), ????????index?=?-1; ???? ????var?items?=?menu.getElementsByTagName('a'); ????//?點擊三角時 ????title.onclick?=?function(event)?{ ????????var?e?=?event?||?window.event; ????????if?(e.stopPropagation)?{ ????????????e.stopPropagation(); ????????}?else?if?(e.cancelBubble)?{ ????????????e.cancelBubble?=?false; ????????} ????????//?執行腳本 ????????menu.style.display?=?'block'; ????????index=-1; ????????setItemStyle(index); ????}; ????//?滑過滑過、離開、點擊每個選項時 ????//?執行腳本 ????for?(var?i?=?0;?i?<?as.length;?i++)?{ ????????var?a?=?as[i]; ????????a.onmouseenter?=?function(event)?{ ????????????var?e?=?event?||?window.event; ????????????e.target.style.backgroundColor?=?'#cc00cc'; ????????????e.target.style.color?=?'#fff'; ????????}; ????????a.onmouseout?=?function(event)?{ ????????????var?e?=?event?||?window.event; ????????????e.target.style.backgroundColor?=?'#fff'; ????????????e.target.style.color?=?'#222'; ????????}; ????????a.onclick?=?function(event)?{ ????????????title.innerHTML?=?event.target.innerHTML; ????????}; ????} ????//?點擊頁面空白處時 ????//?執行腳本 ????document.documentElement.onclick?=?function(event)?{ ????????menu.style.display?=?'none'; ????}; ????document.documentElement.onkeydown?=?function(event)?{ ????????var?e?=?event?||?window.event; ????????var ????????????key_enter?=?13, ????????????key_up?=?38, ????????????key_down?=?40, ????????????item_len?=?menu.children.length?-?1; ???????????? ????????if?(e.stopPropagation)?{ ????????????e.stopPropagation(); ????????}?else?if?(e.cancelBubble)?{ ????????????e.cancelBubble?=?false; ????????} ???????? ????????if?(e.keyCode?===?key_enter)?{ ????????????title.innerHTML?=?items[index].innerHTML; ????????????index?=?-1; ????????????setItemStyle(index); ????????????menu.style.display?=?'none'; ????????}?else?if?(e.keyCode?===?key_up)?{ ????????????if?(index?<=?0)?{ ????????????????index?=?item_len; ????????????}else{ ????????????????index--; ????????????} ????????????setItemStyle(index); ????????}?else?if?(e.keyCode?===?key_down)?{ ????????????if?(index?>=?menu.children.length?-?1)?{ ????????????????index?=?0; ????????????}else{ ????????????????index++; ????????????} ????????????setItemStyle(index); ????????} ????}; ????function?setItemStyle(index)?{ ????????for?(var?i?=?0;?i?<?items.length;?i++)?{ ????????????var?item?=?items[i]; ????????????item.style.color?=?'#222'; ????????????item.style.backgroundColor?=?'#fff'; ????????} ????????if?(index?<=?items.length?&&?index?>=?0)?{ ????????????items[index].style.backgroundColor?=?'#ddd'; ????????} ????} }