JS实现下拉菜单效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现下拉菜单效果相关的知识，希望对你有一定的参考价值。
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实现下拉菜单效果的主要内容，如果未能解决你的问题，请参考以下文章