                        課程
                    
                        /前端開發(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;?
}
#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],
??????li=menu.getElementsByTagName('li');
???as=box.getElementsByTagName('a'),
??????index=0;
??????animated?=?false;?//通過設(shè)置一個(gè)變量來判斷當(dāng)前的ul狀態(tài)
???
????//?點(diǎn)擊三角時(shí)
????title.onclick=function(event){
????????event?=?event?||?window.event;
????????if(event.stopPopagration){
????????????event.stopPopagration();
????????}else{
????????????event.cancelBubble?=?true;
????????}
????????menu.style.display?=?"block";
????}??

???//?滑過滑過、離開、點(diǎn)擊每個(gè)選項(xiàng)時(shí)
????for(var?i?=?0?;?i?<?as.length?;?i++){
????????as[i].onmouseover?=?function(){
????????????this.style.background?=?"#eee";
????????}
????????as[i].onmouseout?=?function(){
??????????this.style.background?=?"";
????????}
????????as[i].onclick?=?function(){
??????????menu.style.display?=?"none";
??????????title.innerHTML?=?this.innerHTML;
????????}
????}???????//鼠標(biāo)動(dòng)作完成

????document.onkeyup?=?function(event){
????????event?=?event?||?window.event;
????????if(event.keyCode==40){
????????????if(index==as.length?-?1){
??????????????index?=?0;
??????????????as[index].style.background?=?"#eee";
??????????????as[as.length?-?1].style.background?=?"#fff";
????????????}else{
??????????????index++;
??????????????as[index].style.background?=?"#eee";
??????????????as[index?-?1].style.background?=?"#fff";
????????????}
????????}
????????if(event.keyCode==38){
??????????if(index==0){
????????????index?=?as.length?-?1;
????????????as[index].style.background?=?"#eee";
????????????as[0].style.background?=?"#fff";
??????????}else{
????????????index?--;
????????????as[index].style.background?=?"#eee";
????????????as[index?+?1].style.background?=?"#fff";
??????????}
????????}
????????if?(event.keyCode?==?13)?{
??????????if?(animated?==?false)?{
????????????as[index].style.background?=?"#eee";
????????????menu.style.display?=?"block";
????????????animated?=?true;
??????????}else{
????????????title.innerHTML?=?as[index].innerHTML;
????????????menu.style.display?=?"none";
????????????animated?=?false;
??????????}
????????}

???//?點(diǎn)擊頁面空白處時(shí)
????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>