<!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;
???
????//?點(diǎn)擊三角時(shí)
????title.onclick=function(event){
??????//?執(zhí)行腳本
??????event=event||window.event;
??????if(event.stopPropagation){
??????????event.stopPropagation();
??????}else{
??????????event.cancelBubble=true;
??????}
??????menu.style.display='block';
????}??
????
???//?滑過(guò)滑過(guò)、離開(kāi)、點(diǎn)擊每個(gè)選項(xiàng)時(shí)
??????//?執(zhí)行腳本
??????for(var?i=0;i<as.length;i++){
??????????as[i].onmouseover=function(){
??????????????this.style.backgroundColor='#ccc';
??????????}
??????????as[i].onmouseout=function(){
??????????????this.style.backgroundColor='#fff';
??????????}
??????????as[i].onclick=function(){
??????????????title.innerHTML=this.innerHTML;
??????????????menu.style.display='none';
??????????}
??????}
????//鍵盤(pán)事件
????document.onkeydown=function(event){
????????event=event||window.event;
????????if(event.keyCode==40){
????????????index++;
????????????if(index>as.length-1)index=0;
????????????for(var?i=0;i<as.length;i++){
????????????????this.style.backgroundColor='#fff';
????????????}
????????????as[index].style.backgroundColor='#ccc';
????????}
????????if(event.keyCode==38){
????????????index--;
????????????if(index<0)index=as.length-1;
????????????for(var?i=0;i<as.length;i++){
????????????????this.style.backgroundColor='#fff';
????????????}
????????????as[index].style.backgroundColor='#ccc';
????????}
????????if(event.keyCode==13){
???????????
????????????????title.innerHTML=as[index].innerHTML;
????????????????menu.style.display='none';
????????????
????????}
????}
??????
???//?點(diǎn)擊頁(yè)面空白處時(shí)
???????//?執(zhí)行腳本
???????document.onclick=function(event){
???????????event=event||window.event;
???????????menu.style.display='none';
???????}
?}
???</script>
</head>
<body>
????<div?id="divselect">
??????<cite>請(qǐng)選擇分類(lèi)</cite>
??????<ul>
?????????<li?id="li"><a?href="javascript:;"?selectid="1">ASP開(kāi)發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="2">.NET開(kāi)發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="3">PHP開(kāi)發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="4">Javascript開(kāi)發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="5">Java特效</a></li>
??????</ul>
????</div>
</body>
</html>
2016-09-20
鍵盤(pán)事件里面的for循環(huán)中this指定的是document,不是當(dāng)前的as[i]對(duì)象,老師說(shuō)過(guò)好像不能對(duì)document設(shè)置backgroundColor,這里可以直接用a[i]來(lái)代替this