下拉菜单鼠标键盘事件 1. [代码] [JavaScript]代码 htmlheadmeta charset="utf-8"title下拉菜单/titlestylebody,ul,li{ margin:0; padding:0; font-size:13px;}ul,li{list-style:none;}#divselect{width:186px; margin:80px auto; position
1. [代码][JavaScript]代码
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
<style>
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;position:relative;}
#divselect cite i{
position: absolute;
width: 0;
height:0;
right: 5px;
top: 7px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid #ccc;}
#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>
window.onload=function(){
var box=document.getElementById('divselect'),
title=box.getElementsByTagName('cite')[0],
span=title.getElementsByTagName('span')[0],
aUl=box.getElementsByTagName("ul")[0],
aS=box.getElementsByTagName("a"),
index=-1;
title.onclick=function(event){
event=event||window.event;
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
aUl.style.display='block';
document.onkeyup=function(e){
e=e || window.event;
for(var i=0;i<aS.length;i++){
aS[i].style.background='none';
}
// 如果按下了向下方向键
if(e.keyCode==40){
index++;
if(index>=aS.length){
index=0;
}
aS[index].style.background="#ccc";
}
// 如果按下了向上方向键
if(e.keyCode==38){
if(index<=0){
index=aS.length;
}
index--;
aS[index].style.background="#ccc";
}
// 如果按下了回车键
if(e.keyCode==13 && index!=-1){
span.innerHTML=aS[index].innerHTML;
for(var i=0;i<aS.length;i++){
aS[i].style.background='none';
}
aUl.style.display='none';
index=-1;
}
}
}
for(var i=0; aS.length>i; i++){
aS[i].onmouseover=function(){
this.style.background='#ccc';
}
aS[i].onmouseout=function(){
this.style.background='none';
}
aS[i].onclick=function(){
span.innerHTML=this.innerHTML;
}
}
//点击空白
document.onclick=function(){
aUl.style.display='none';
}
}
</script>
</head>
<body>
<div id="divselect">
<cite><span>请选择分类</span><i></i></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>