<!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){
??????event?=?event||window.event;
?menu.style.display?=?'block';
?if(event.stopPropagation){
event.stopPropagation();?
?}else{
????event.cancelBubble?=?true;???
?}
?document.onkeyup?=?function(event){
event?=?event||window.event;
if(event.keyCode==40){
index++;
if(index>=as.length)?index=0;
for(var?i=0;?i<as.length;i++){
?as[i].style.background?=?'#fff';
}
as[index].style.background?=?'#ccc';
}?
if(event.keyCode==38){
index--;
if(index<0)?index=as.length-1;
for(var?i=0;?i<as.length;i++){
?as[i].style.background?=?'#fff';
}
as[index].style.background?=?'#ccc';
}
if(event.keyCode==13){
for(var?i=0;?i<as.length;i++){
?as[i].style.background?=?'#fff';
}
title.innerHTML?=?as[index].innerHTML;
menu.style.display?=?'none';
}??
?}
????}??
????
???//?滑過滑過、離開、點擊每個選項時
??????for(var?i=0;?i<as.length;?i++){
as[i].onmouseover?=?function(){
?????????????for(var?i=0;?i<as.length;i++){
???????as[i].style.background?=?'#fff';
}
this.style.background?=?'#ccc';
}
as[i].onmouseout?=?function(){
this.style.background?=?'#fff';
}
as[i].onclick?=?function(event){
event?=?event||window.event;
if(event.stopPropagation){
??event.stopPropagation();?
}else{
??event.cancelBubble?=?true;???
}
menu.style.display?=?'none';
title.innerHTML?=?this.innerHTML;??
}??
?}
???//?點擊頁面空白處時
??????document.onclick?=?function(){
menu.style.display?=?'none';?
?}
?}
</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>我的想法是在mouseover的時候，先將所有選項背景包括鍵盤事件設置的背景色設為白色再執行鼠標事件指定位置的背景變色。不知道問題出在哪，或者有更好的方法去除兩個陰影的bug問題，請大神幫忙解決一下~
為何在慕課的測試環境里沒有鍵盤和鼠標事件兩個陰影的bug，但是換到本地環境就又不行了？
qq_還不走
2016-12-07 14:50:11
