1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>下拉菜单</title>
6 <style type="text/css">
7 body,ul,li{
8 margin:0;
9 padding:0;
10 font-size:13px;
11 }
12 ul,li{
13 list-style:none;
14 }
15 #divselect{
16 width:186px;
17 margin:80px auto;
18 position:relative;
19 z-index:10000;
20 }
21 #divselect cite{
22 width:150px;
23 height:24px;
24 line-height:24px;
25 display:block;
26 color:#807a62;
27 cursor:pointer;
28 font-style:normal;
29 padding-left:4px;
30 padding-right:30px;
31 border:1px solid #333333;
32 }
33 #divselect ul{
34 width:184px;
35 border:1px solid #333333;
36 background-color:#ffffff;
37 position:absolute;
38 z-index:20000;
39 margin-top:-1px;
40 display:none;
41 }
42 #divselect ul li{
43 height:24px;
44 line-height:24px;
45 }
46 #divselect ul li a{
47 display:block;
48 height:24px;
49 color:#333333;
50 text-decoration:none;
51 padding-left:10px;
52 padding-right:10px;
53 }
54 </style>
55 <script type="text/javascript">
56 window.onload=function(){
57 var box=document.getElementById(‘divselect‘),
58 title=box.getElementsByTagName(‘cite‘)[0],
59 menu=box.getElementsByTagName(‘ul‘)[0],
60 as=box.getElementsByTagName(‘a‘),
61 index=-1;
62
63 // 点击多选框时显示选项
64 title.onclick=function(event){
65 event=event||window.event;
66 if(menu.style.display==‘block‘){
67 menu.style.display=‘none‘;
68 for(var i=0;i<as.length;i++){
69 as[i].style.backgroundColor=‘#fff‘;
70 }
71 index=-1;
72 }else{
73 menu.style.display="block";
74 }
75 if(event.stopPropagation){
76 event.stopPropagation();
77 }
78 else{
79 event.cancelBubble=true;
80 }
81 }
82
83 // 鼠标滑过、离开、点击每个选项时
84 for(var i=0;i<as.length;i++){
85 as[i].onmouseover=function(){
86 for(var j=0;j<as.length;j++){
87 as[j].style.background=‘#fff‘;
88 }
89 this.style.backgroundColor=‘#ccc‘;
90 for(var j=0;j<as.length;j++){
91 if(as[j].style.backgroundColor==‘rgb(204, 204, 204)‘){
92 index=j;
93 }
94 }
95 console.log(index);
96 }
97 as[i].onmouseout=function(){
98 this.style.backgroundColor=‘#fff‘;
99 }
100 as[i].onclick=function(){
101 title.innerHTML=this.innerHTML;
102 menu.style.display=‘none‘;
103 }
104 }
105 // 鼠标点击页面空白处时隐藏选项
106 document.onclick=function(){
107 menu.style.display=‘none‘;
108 for(var i=0;i<as.length;i++){
109 as[i].style.backgroundColor=‘#fff‘;
110 }
111 index=-1;
112 }
113
114 //键盘上下切换
115 document.onkeydown=function(event){
116 event=event||window.event;
117 if(menu.style.display==‘block‘){
118 if(event.keyCode==40){
119 index=index+1;
120 if(index>=as.length){
121 index=0;
122 }
123 }
124 else if(event.keyCode==38){
125 index=index-1;
126 if(index<0){
127 index=as.length-1;
128 }
129 }
130 else if(event.keyCode==13){
131 title.innerHTML=as[index].innerHTML;
132 menu.style.display=‘none‘;
133 index=-1;
134 }
135 for(var i=0;i<as.length;i++){
136 as[i].style.backgroundColor=‘#fff‘;
137 }
138 as[index].style.backgroundColor=‘#ccc‘;
139 console.log(index);
140 }
141 }
142 }
143 </script>
144 </head>
145 <body>
146 <div id="divselect">
147 <cite>请选择分类</cite>
148 <ul>
149 <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li>
150 <li><a href="javascript:;" selectid="2">.NET开发</a></li>
151 <li><a href="javascript:;" selectid="3">PHP开发</a></li>
152 <li><a href="javascript:;" selectid="4">Javascript开发</a></li>
153 <li><a href="javascript:;" selectid="5">Java特效</a></li>
154 </ul>
155 </div>
156 </body>
157 </html>
遇到的问题及注意事项：
1、遍历数组添加事件时，for循环中变量i的问题。
var声明的变量在代码块中没有独立的作用域，遍历添加事件中，如果在事件处理函数中使用了变量i，会出现问题。
解决方法：①使用this代替触发事件的array[i]。②使用let声明函数。
2、if中判定颜色时应使用rgb颜色。
3、DOM0级、DOM2级、IE方法、HTML方法添加事件处理程序的区别。
时间： 2024-11-25 10:14:54