首页 > 代码库 > JS实现下拉菜单效果

JS实现下拉菜单效果

2024-09-22 06:00:28   218人阅读

  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方法添加事件处理程序的区别。

 

JS实现下拉菜单效果


联系
我们