KISSY基础篇乄KISSY之优化实例

KISSY之优化实例

今日任务：拆合菜单代码优化重构

这一节我们主要来看一下拆合菜单进行代码优化重构后的效果。

一、测试页面代码

<div id="content">    <ul id="menu">       <li class="menu-list">          <div><a></a>test0</div>          <ul>             <li>test00</li>             <li>test01</li>             <li>test02</li>          </ul>       </li>       <li class="menu-list">          <div><a></a>test1</div>          <ul>             <li>test10</li>             <li>test11</li>             <li>test12</li>          </ul>       </li>       <li class="menu-list">          <div><a></a>test2</div>          <ul>             <li>test20</li>             <li>test21</li>             <li>test22</li>          </ul>       </li>    </ul> </div>

二、css样式代码

body{    background-color:#66cccc; } #content{    padding-top:20px; } #menu{    width:180px;    background-color:#66cccc;    border:0px solid #CDC8CF;    border-bottom:none; } #menu .menu-list{    display:inline; } #menu .menu-list div{    height:27px;    background:url(../img/menu-header-bg.jpg) 0px 0px repeat-x #99F;    border-bottom:1px solid #CDC8CF;    padding-top:3px;    padding-left:10px;    cursor:pointer; } #menu .menu-list div a{    font-size:14px;font-weight:bold;color:#765D97;    margin-left:10px;    background:url(../img/menu-arrow.jpg) 0px -24px no-repeat;padding-left:20px; } #menu .menu-list  ul{    background-color:#FFF;    border-bottom:1px solid #CDC8CF;    padding:5px 50px;    height:90px; } #menu .menu-item  ul li{    padding:2px 20px;    border:1px solid #FFF; } #menu .menu-item  ul li a{    color:#666; } .arrow-down{    background-position:0px 2px !important; } }

 

图片依然是之前的那两张图片，此处不再展示。

三、js之KISSY方法

KISSY.use('node,anim', function (S,Node,Anim) {    var $=Node.all;    //隐藏所有子菜单项    $(".menu-list").each(function(v){       $(v).children('ul').hide();       });    $("#menu div").on('click',function(ev){       //获得当前menu-list的ul节点       var nextMenu = $(ev.target).next();       //获得当前menu-list节点       var parentMenu=$(ev.target).parent();       //获取当前menu-list的ul节点的display样式属性值       var display =$(nextMenu).css('display');       //获取当前menu-list的div的子节点a       var children = $(ev.target).children();       //获得当前menu-list之外的同级menu-list节点       var sibItems = $(parentMenu).siblings();       //隐藏其同级节点       $(sibItems).each(function(v){          $(v).children('ul').hide();          $(v).children('div').children().removeClass('arrow-down');          });        /*$("#btn-1").on('click',function(){           //创建一个新的li节点          alert(nextMenu.text());           $(nextMenu).append('<li class="new"><a>test13</a></li>');       });*/       //根据子菜单的显示情况来判断是否显示子菜单       if(display == 'none'){          var h = $(nextMenu).height();          $(nextMenu).css({height: 0,display: 'block',overflow:'hidden'});          //此处用了Anim模块，也可用node模块的animate方法：$(nextMenu).animate({'height':h+'px'},1,'elasticOut');          var anim=Anim($(nextMenu),{'height':h+'px'},1,Anim.Easing.elasticOut);          anim.run();          $(children).addClass('arrow-down');       }else{          $(nextMenu).slideUp(0.5);          $(children).removeClass('arrow-down');       }       return false;    }); });

 

来亲自操作，体验一下吧！