《jquery + easing.js 点击抽屉式展开收缩/显示隐藏菜单子菜单特效代码》正文开始,本次阅读大概7分钟。
之前分享过《jQuery 鼠标点击展开/显示和收缩/隐藏导航菜单(子菜单)》
特点是:展开分类后,点击另一菜单,之前的菜单也不会关闭,而本文要分享的是如下图,鼠标点击展开子菜单的时候,另一个主菜单会自动关闭,仅保持一个主菜单展开状态!
如上图,本文分享的就是关于jquery + easing.js实现抽屉式的展开收缩、显示隐藏子菜单的效果:
重点:切换的时候,一个主菜单展开会关闭和隐藏另一个菜单下的子菜单
这种特效非常适合用于各种网站的菜单中,特别是侧栏菜单,适合子菜单比较多时使用!
!DOCTYPEhtml html head metacharset=UTF-8 title树型菜单/title style /* author:前端一枚努力学习中qq:815183231; */ /*简单粗暴重置默认样式===============================*/ *{margin:0;padding:0;} img{border:0;} ul,li{list-style-type:none;} a{color:#00007F;text-decoration:none;} a:hover{color:#bd0a01;text-decoration:underline;} .treebox{width:200px;margin:0auto;background-color:#1a6cb9;} .menu{overflow:hidden;border-color:#ddd;border-style:solid;border-width:01px1px;} /*第一层*/ .menuli.level1a{ display:block; height:45px; line-height:45px; color:#fff; padding-left:50px; border-bottom:1pxsolid#000; font-size:16px; position:relative; } .menuli.level1a:hover{text-decoration:none;background-color:#326ea5;} .menuli.level1a.current{background:#0f4679;} /*============修饰图标*/ .ico{width:20px;height:20px;display:block;position:absolute;left:20px;top:10px;background-repeat:no-repeat;background-image:url(images/ico1.png);} /*============小箭头*/ .level1i{width:20px;height:10px;background-image:url(images/arrow.png);background-repeat:no-repeat;display:block;position:absolute;right:20px;top:20px;} .level1i.down{background-position:0-10px;} .ico1{background-position:00;} .ico2{background-position:0-20px;} .ico3{background-position:0-40px;} .ico4{background-position:0-60px;} .ico5{background-position:0-80px;} /*第二层*/ .menuliul{overflow:hidden;} .menuliul.level2{display:none;background:#0f4679;} .menuliul.level2lia{ display:block; height:45px; line-height:45px; color:#fff; text-indent:60px; /*border-bottom:1pxsolid#ddd;*/ font-size:14px; } /style /head body div ul li ahref=#noneemclass=icoico1/em导航一i/i/a ul liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li /ul /li li ahref=#noneemclass=icoico2/em导航一i/i/a ul liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li /ul /li li ahref=#noneemclass=icoico3/em导航一i/i/a ul liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li /ul /li li ahref=#noneemclass=icoico4/em导航一i/i/a ul liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li /ul /li li ahref=#noneemclass=icoico5/em导航一i/i/a ul liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li liahref=javascript:;导航选项/a/li /ul /li /ul /div !--引入jQuery-- scriptsrc=scripts/jquery1.8.3.min.jstype=text/javascript/script scriptsrc=scripts/easing.js/script script //等待dom元素加载完毕. $(function(){ $(.treebox.level1a).click(function(){ $(this).addClass(current)//给当前元素添加current样式 .find(i).addClass(down)//小箭头向下样式 .parent().next().slideDown(slow,easeOutQuad)//下一个元素显示 .parent().siblings().children(a).removeClass(current)//父元素的兄弟元素的子元素去除current样式 .find(i).removeClass(down).parent().next().slideUp(slow,easeOutQuad);//隐藏 returnfalse;//阻止默认时间 }); }) /script /body /html