凉风有信,秋月无边。
亏我思娇的情绪好比度日如年。

jquery + easing.js 点击抽屉式展开收缩/显示隐藏菜单子菜单特效代码

《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

赞(73)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的内容,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。本博客资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。如果本文导致的版权问题以及内容纠错问题请联系站长QQ:1004619 | 点此给我发送邮件
本文标题:jquery + easing.js 点击抽屉式展开收缩/显示隐藏菜单子菜单特效代码
本文地址:https://www.1004619.com/nn/jqueryeasingjsdjctszkssxsyccdz.html