JS實現下拉菜單效果
阿新 • • 發佈：2017-05-15
nts arr for循環 var true display 獨立 ++ dom0
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; 27cursor: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實現下拉菜單效果