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