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

之前分享过《jQuery 鼠标点击展开/显示和收缩/隐藏导航菜单（子菜单）》 

特点是：展开分类后，点击另一菜单，之前的菜单也不会关闭，而本文要分享的是如下图，鼠标点击展开子菜单的时候，另一个主菜单会自动关闭，仅保持一个主菜单展开状态！

如上图，本文分享的就是关于jquery + easing.js实现抽屉式的展开收缩、显示隐藏子菜单的效果：

重点：切换的时候，一个主菜单展开会关闭和隐藏另一个菜单下的子菜单

这种特效非常适合用于各种网站的菜单中，特别是侧栏菜单，适合子菜单比较多时使用！

!DOCTYPE html>
    html>
    head>
     meta charset="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: 0 auto;
     background-color:#1a6cb9;
 }
  .menu{
     overflow: hidden;
     border-color: #ddd;
     border-style: solid ;
     border-width: 0 1px 1px ;
 }
      /*第一层*/  .menu li.level1>
a{
        display:block;
       height: 45px;
       line-height: 45px;
       color: #fff;
       padding-left: 50px;
       border-bottom: 1px solid #000;
        font-size: 16px;
       position: relative;
   }
   .menu li.level1 a:hover{
     text-decoration: none;
    background-color:#326ea5;
   }
   .menu li.level1 a.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);
 }
   /*============小箭头*/   .level1 i{
     width: 20px;
     height: 10px;
     background-image:url(images/arrow.png);
     background-repeat: no-repeat;
     display: block;
     position: absolute;
     right: 20px;
     top: 20px;
 }
  .level1 i.down{
     background-position: 0 -10px;
 }
   .ico1{
     background-position: 0 0;
 }
   .ico2{
     background-position: 0 -20px;
 }
   .ico3{
     background-position: 0 -40px;
 }
   .ico4{
     background-position: 0 -60px;
 }
                 .ico5{
     background-position: 0 -80px;
 }
   /*第二层*/   .menu li ul{
     overflow: hidden;
 }
   .menu li ul.level2{
     display: none;
    background: #0f4679;
  }
   .menu li ul.level2 li a{
        display: block;
       height: 45px;
       line-height: 45px;
       color: #fff;
       text-indent: 60px;
       /*border-bottom: 1px solid #ddd;
     */   font-size: 14px;
   }
     /style>
    /head>
    body>
     div>
      ul>
       li>
        a href="#none">
    em class="ico ico1">
    /em>
    导航一i>
    /i>
    /a>
        ul>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
        /ul>
       /li>
       li>
        a href="#none">
    em class="ico ico2">
    /em>
    导航一i>
    /i>
    /a>
        ul>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
        /ul>
       /li>
       li>
        a href="#none">
    em class="ico ico3">
    /em>
    导航一i>
    /i>
    /a>
        ul>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
        /ul>
       /li>
       li>
        a href="#none">
    em class="ico ico4">
    /em>
    导航一i>
    /i>
    /a>
        ul>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
        /ul>
       /li>
                            li>
        a href="#none">
    em class="ico ico5">
    /em>
    导航一i>
    /i>
    /a>
        ul>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
         li>
    a href="javascript:;
    ">
    导航选项/a>
    /li>
        /ul>
       /li>
      /ul>
     /div>
     !-- 引入 jQuery -->
    script src="scripts/jquery1.8.3.min.js" type="text/javascript">
    /script>
    script src="scripts/easing.js">
    /script>
    script>
//等待dom元素加载完毕. $(function(){
      $(".treebox .level1>
a").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');
    //隐藏    return false;
 //阻止默认时间  }
    );
 }
    )/script>
    /body>
    /html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！