最近更新 » 前端

    Jquery 简单代码实现菜单联动

    时间:2013-3-2 作者:天空下的雨 分类: 网页技术 浏览:24529

    网页代码:

    <div class="nav-list">
      <div class="item">菜单名字1</div>
      <div class="more">下级分类1</div>
      <div class="item">菜单名字2</div>
      <div class="more">下级分类2</div>
      <div class="item">菜单名字3</div>
      <div class="more">下级分类3</div>
    </div>
    JS代码

    $(document).ready(function(){	
    $('.nav-list .more').parent().mouseenter(function(){
    	$(this).removeClass('list_current');
    	$(this).addClass("list_current");
    	$(this).find('.more').show();
    }).mouseleave(function(){
    	$(this).removeClass('list_current');
    	$(this).find('.more').hide();
    });	
    });

     

    还需要加载Jquery,1.3以上版本。CSS代码,自己看代码写写吧,不知道意思,不知道写?自己搜搜百度或谷歌吧

     

    Continue