最近在学习淘宝框架KISSY 恩 还在学习中 很早以前 看到某个网站一个下拉菜单的效果 其中的javascript是用遍历的效果实现的 看起来javascript代码并不是怎么样 没有封装性 代码不优雅 也趁着最近在学习KISSY 所以今天用了KISSY写了一个。

 

   
   
   
   
    
    
    
    
    
  1. > 
    2. 
    
    
    
    
  2. <html> 
    3. 
    
    
    
    
  3.  <head> 
    4. 
    
    
    
    
  4.   <title> New Document title> 
    5. 
    
    
    
    
  5.   <meta name="Generator" content="EditPlus"> 
    6. 
    
    
    
    
  6.   <meta name="Author" content=""> 
    7. 
    
    
    
    
  7.   <meta name="Keywords" content=""> 
    8. 
    
    
    
    
  8.   <meta name="Description" content=""> 
    9. 
    
    
    
    
  9.   <base target="_blank"/> 
    10. 
    
    
    
    
  10.   <style> 
    11. 
    
    
    
    
  11.   body,ul,li,div{margin:0;padding:0;}  
    12. 
    
    
    
    
  12.   ul,li{list-style:none;}  
    13. 
    
    
    
    
  13.   .wrap{width:294px;margin:50px auto 0;overflow:hidden;}  
    14. 
    
    
    
    
  14.   .nav{width:97px;float:left;line-height:22px;overflow:hidden;text-align:center;background:#ccc;margin-left:1px;display:inline;}  
    15. 
    
    
    
    
  15.   .nav a{font-size:14px;}  
    16. 
    
    
    
    
  16.  .menu{width:98px;overflow:hidden;display:none;background:green;}  
    17. 
    
    
    
    
  17.  .menu li{line-height:22px;width:98px;}  
    18. 
    
    
    
    
  18.   .menu li a{color:#fff;}  
    19. 
    
    
    
    
  19.  .show{display:block;}  
    20. 
    
    
    
    
  20.   style> 
    21. 
    
    
    
    
  21.   <script src="http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min.js">script> 
    22. 
    
    
    
    
  22.  head> 
    23. 
    
    
    
    
  23.  <body> 
    24. 
    
    
    
    
  24.     <div class="wrap"> 
    25. 
    
    
    
    
  25.         <ul> 
    26. 
    
    
    
    
  26.             <li class="nav"> 
    27. 
    
    
    
    
  27.                 <a href="#">菜单一a> 
    28. 
    
    
    
    
  28.                 <ul class="menu"> 
    29. 
    
    
    
    
  29.                     <li><a href="#">菜单一a>li> 
    30. 
    
    
    
    
  30.                     <li><a href="#">菜单二a>li> 
    31. 
    
    
    
    
  31.                     <li><a href="#">菜单三a>li> 
    32. 
    
    
    
    
  32.                     <li><a href="#">菜单四a>li> 
    33. 
    
    
    
    
  33.                 ul>     
    34. 
    
    
    
    
  34.             li> 
    35. 
    
    
    
    
  35.             <li class="nav"> 
    36. 
    
    
    
    
  36.                 <a href="#">菜单二a> 
    37. 
    
    
    
    
  37.                 <ul class="menu"> 
    38. 
    
    
    
    
  38.                     <li><a href="#">菜单一a>li> 
    39. 
    
    
    
    
  39.                     <li><a href="#">菜单二a>li> 
    40. 
    
    
    
    
  40.                     <li><a href="#">菜单三a>li> 
    41. 
    
    
    
    
  41.                     <li><a href="#">菜单四a>li> 
    42. 
    
    
    
    
  42.                 ul> 
    43. 
    
    
    
    
  43.             li> 
    44. 
    
    
    
    
  44.             <li class="nav"> 
    45. 
    
    
    
    
  45.                 <a href="#">菜单三a> 
    46. 
    
    
    
    
  46.                 <ul class="menu"> 
    47. 
    
    
    
    
  47.                     <li><a href="#">菜单一a>li> 
    48. 
    
    
    
    
  48.                     <li><a href="#">菜单二a>li> 
    49. 
    
    
    
    
  49.                     <li><a href="#">菜单三a>li> 
    50. 
    
    
    
    
  50.                     <li><a href="#">菜单四a>li> 
    51. 
    
    
    
    
  51.                 ul> 
    52. 
    
    
    
    
  52.             li> 
    53. 
    
    
    
    
  53.         ul> 
    54. 
    
    
    
    
  54.     div> 
    55. 
    
    
    
    
  55. <script> 
    56. 
    
    
    
    
  56.     var DOM = KISSY.DOM,Event = KISSY.Event;  
    57. 
    
    
    
    
  57.     var menu = DOM.query(".menu"),nav = DOM.query(".nav");  
    58. 
    
    
    
    
  58.         for(var j=0;j<nav.length;j++){  
    59. 
    
    
    
    
  59.             (function(j){  
    60. 
    
    
    
    
  60.                 Event.on(nav[j],'mouseenter',function(){  
    61. 
    
    
    
    
  61.                     for(var i=0;i<menu.length;i++){  
    62. 
    
    
    
    
  62.                         DOM.removeClass(menu[i],'show')  
    63. 
    
    
    
    
  63.                     }  
    64. 
    
    
    
    
  64.                         DOM.addClass(menu[j],'show');  
    65. 
    
    
    
    
  65.                 })  
    66. 
    
    
    
    
  66.                 Event.on(nav[j],'mouseleave',function(){  
    67. 
    
    
    
    
  67.                     for(var i=0;i<menu.length;i++){  
    68. 
    
    
    
    
  68.                         DOM.removeClass(menu[i],'show')  
    69. 
    
    
    
    
  69.                     }  
    70. 
    
    
    
    
  70.                 })  
    71. 
    
    
    
    
  71.             })(j)  
    72. 
    
    
    
    
  72.  
    73. 
    
    
    
    
  73.         }  
    74. 
    
    
    
    
  74. script> 
    75. 
    
    
    
    
  75.  body> 
    76. 
    
    
    
    
  76. html> 
    77.