位置：广州松河 > 技术支持 > jquery + easing.js 点击抽屉式展开收缩/显示隐藏菜单子菜单特效代码_js/jQuery

jQuery

来源：网络整理时间：2023/3/4 0:57:42 共 3629 浏览

之前分享过《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>

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条： js 网站文字在线可以鼠标点击转换 - 简体转繁体/繁体转换简体_js/jQuery | ·下一条：jquery 鼠标触发，抽屉式幻灯片左右切换 - 图片展开收缩代码_js/jQuery