                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /DOM事件探秘

歡迎指正代碼

<!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)擊三角時
????title.onclick=function(event){
????//?執(zhí)行腳本
?????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){
?????if(index==as.length-1)
?????{
?????index=0;
?????as[index].style.background="#CCC";
?????as[as.length-1].style.background="#FFF";
?????}else{
?????index++;
?????as[index].style.background="#CCC";
?????as[index-1].style.background="#FFF";
?????}
?????
????????}
?????else?if(event.keyCode==38)
????{
?????if(index==-1)
?????{
?????index=as.length-1;
?????as[index].style.background="#CCC";

?????}else?if(index==0)
???????????{
????????????index=as.length-1;
?????as[index].style.background="#CCC";
?????as[0].style.background="#FFF";
???????????}
?????else{
?????index--;
?????as[index].style.background="#CCC";
????????????as[index+1].style.background="#FFF";

?????}
????}
????else?if(event.keyCode==13){
?????if(event.index!=-1){
?????title.innerHTML=as[index].innerHTML;
?????index=-1;
?????menu.style.display="none";
?????}

????}
????}
????}??

???//?滑過滑過、離開、點(diǎn)擊每個選項(xiàng)時
???//?執(zhí)行腳本
?
??for(var?i=0;i<as.length;i++)
??{
???as[i].onmouseover=function(){
???this.style.background="#CCC";
???}
???as[i].onmouseout=function(){
???this.style.background="#FFF";
???}
???as[i].onclick=function(){
???title.innerHTML=this.innerHTML;
???menu.style.display="none";

???}
??}
???//?點(diǎn)擊頁面空白處時
??//?執(zhí)行腳本
???????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開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="2">.NET開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="3">PHP開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="4">Javascript開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="5">Java特效</a></li>
??????</ul>
????</div>
</body>
</html>