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

 

 
   
     
    
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    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.