虽然写出来了但是有个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就会有问题了,所以需要按两下。但是以目前水平确实没有好的办法