纠结在仿下拉中.

Submitted by 爱得 on 2010, April 21, 2:59 PM. Web标准

最近用得一个效果,如图:

大小: 1.06 K 尺寸: 167 x 161 浏览: 0 次 点击打开新窗口浏览全图

先看结构.

XML/HTML代码
  1. <div class="NSerBox clear">  
  2.     <div id="SerBoxClass" class="SerBox" onclick="Onclick('Class');">  
  3.         <p id="input_Class">选择分类</p>  
  4.     </div>  
  5.     <ul class="filetree" id="TreeBoxClass" style="display:none;" onmouseout="aiout('Class')" onmouseover="aiover('Class')">  
  6.         <li><a href="#" onclick="ok('Class',this)">笔记本1</a></li>  
  7.         <li><a href="#" onclick="ok('Class',this)">笔记本2</a></li>  
  8.         <li><a href="#" onclick="ok('Class',this)">笔记本3</a></li>  
  9.         <li><a href="#" onclick="ok('Class',this)">笔记本4</a></li>  
  10.         <li><a href="#" onclick="ok('Class',this)">笔记本5</a></li>  
  11.     </ul>  
  12. </div>  

主要考虑到p的宽度,以及用背景时能更好的处理CSS,而用不着去另写结构.

当然,看到那么多onclick,其实主要由于个人JS不过关导致的,见谅!

下面是JS.拼在一起能运行没出错.呵呵

一、考虑用setTimeout与clearTimeout实现鼠标移开隐藏ul. Demo

JavaScript代码
  1. <!--   
  2. function Onclick(id){   
  3.     var aide = document.getElementById("TreeBox"+id).getElementsByTagName("li");   
  4.     for (i=0;i<aide.length;i++) {   
  5.         aide[i].onmouseover = function (){   
  6.             this.style.backgroundColor="#c0e5f2";   
  7.         }   
  8.         aide[i].onmouseout = function (){   
  9.             this.style.backgroundColor="#fff";   
  10.         }   
  11.     }   
  12.     if (document.getElementById("TreeBox"+id).style.display == 'none'){   
  13.         document.getElementById("TreeBox"+id).style.display = "block";   
  14.         }   
  15.         else{   
  16.             document.getElementById("TreeBox"+id).style.display = "none";   
  17.         }   
  18.         return false;   
  19. }   
  20.   
  21. function aiover(id){   
  22.     try{window.clearTimeout(clearTime);}catch(e){}   
  23.     }   
  24.   
  25. function aiout(id){   
  26.     var aide=document.getElementById("TreeBox"+id).style.display;   
  27.     if(aide=="block"){   
  28.         clearTime = setTimeout("ainone('Class')", 1000);   
  29.         }   
  30.     }   
  31.   
  32. function ainone(id){   
  33.     document.getElementById("TreeBox"+id).style.display="none";   
  34.     }    
  35.   
  36. function ok(id,href)   
  37. {   
  38.     var onone = document.getElementById("TreeBox"+id);   
  39.     document.getElementById("input_"+id).innerHTML=href.innerHTML;   
  40.     onone.style.display="none";   
  41. }   
  42. //-->  

二、考虑用点击SerBox外的其它区域时隐藏. Demo 别外在p 里加了 input ....

JavaScript代码
  1. <!--   
  2. function Onclick(id){   
  3.     var aide = document.getElementById("TreeBox"+id).getElementsByTagName("li");   
  4.     for (i=0;i<aide.length;i++) {   
  5.         aide[i].onmouseover = function (){   
  6.             this.style.backgroundColor="#c0e5f2";   
  7.         }   
  8.         aide[i].onmouseout = function (){   
  9.             this.style.backgroundColor="#fff";   
  10.         }   
  11.     }   
  12.     if (document.getElementById("TreeBox"+id).style.display == 'none'){   
  13.         document.getElementById("TreeBox"+id).style.display = "block";   
  14.         }   
  15.         else{   
  16.             document.getElementById("TreeBox"+id).style.display = "none";   
  17.         }   
  18.         return false;   
  19. }   
  20.   
  21. function ok(id,tname){   
  22.     var onone = document.getElementById("TreeBox"+id);   
  23.     document.getElementById("input_"+id).value=tname;   
  24.     onone.style.display="none";   
  25.     }   
  26.   
  27. document.onclick = function(e){   
  28.     var event = window.event || e;   
  29.     var noe = event.srcElement || event.target;   
  30.     if(noe.className !== "SerBox"){   
  31.         document.getElementById("TreeBoxClass").style.display="none";   
  32.         //alert('看点击的是那....');   
  33.         }   
  34.         else{   
  35.             return;   
  36.             }   
  37.     }   
  38.   
  39. //-->  

其它的不说,有错请告之,谢

Tags: web标准, 菜单

« 上一篇 | 下一篇 »

发表评论

注:网址请加上 http:// 若无,报错...

评论内容 (必填):