终于还是靠自己做的差不多了，但是发现个BUG
来源：5-1 编程挑战
marshall_stan
2015-08-12 00:00
<!doctype html>
<html lang="en">
<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;
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
menu.style.display="block";
}
document.onkeyup= function (event) {
event = event || window.event;
if(event.keyCode==38){
if(index<=0){
index=as.length-1;
}else{
index=index-1;
}
}else if(event.keyCode==40){
if(index>=as.length-1){
index=0;
}else{
index=index+1;
}
}else if(event.keyCode==13){
if(index==-1){
}else{
title.innerHTML=as[index].innerHTML;
menu.style.display="none";
}
index=-1;
}
for(var i= 0,l=as.length;i<l;i++){
if(i==index){
as[i].style.background="#cccccc";
}else{
as[i].style.background="#ffffff";
}
}
}
for(var j= 0,l2=as.length;j<l2;j++){
as[j].onmouseover=function(){
this.style.background="#ccc";
}
as[j].onmouseout=function(){
this.style.background="#fff";
}
as[j].onclick=function(){
title.innerHTML=this.innerHTML;
menu.style.display="none";
}
}
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>三角形图片链接问题没有去管，所以没有倒三角形。
发现的BUG：但方向上下键的函数和onmouseover&onmouseout的函数同时被调用的时候，有可能会出现两个灰色背景的<li>标签，怎么弄啊？
写回答
关注
1回答
-
- bab_lov
- 2015-12-28 17:17:23
为onmouseover事件（即第112行）添加以下代码：
if (index != -1 && index <= as.length - 1) { as[index].style.background = "#ffffff"; index = -1; }在每次鼠标悬浮时清除按键盘导致的背景色。
DOM事件探秘
DOM事件？本课程会通过实例来给小伙伴们讲解如何使用这些事件
99528 学习 · 1305 问题
相似问题