瓦窑源码 快速建站好帮手

jQuery网站管理后台左侧边展开收缩图标菜单代码

特效介绍

这款jQuery网站管理后台左侧边展开收缩图标菜单代码,支持收缩起来只显示图标,做后台非常好用的侧边图标菜单插件。

具体效果看右侧的【在线演示】吧^_^

js代码

<script type="text/javascript">
$(document).ready(function(){
    //展开收起
    $(".btn-nav").click(function () {
      $(".lvc-wrap").toggleClass("lvc-close")
      $("ol").toggleClass("small-ol")
      $(".next-layer ol").hide()
 
      if($("#lvc-nav").hasClass('lvc-close')){
        $(".next-layer ").removeClass("arrow")
      }
    })
 
    //选中状态
    $(".lvc-nav li").click(function () {
      $(this).siblings().find('ol').hide()
      $(this).addClass("active").siblings().removeClass("active")
    })
 
    //选中子集清除父级active
    $("ol>li").click(function (e) {
      console.log('ol>li clicked')
      e.stopPropagation()
     $(this).parent().parent().removeClass("active")
    })
 
    //二级导航展开收起
    $(".next-layer").click(function () {
      $(this).children("ol").toggle();
      $(this).toggleClass("arrow").siblings().removeClass("arrow")
    })
 
 
     $("ol li").click(function () {
       if($("ol").hasClass('small-ol')) {
         $(".small-ol").hide();
         $(this).parent().parent().addClass("active")
       }
     })
})
</script>

展开收缩图标菜单

TAG标签:展开收缩图标菜单

上一个:漂亮大气的SuperSlide响应式导航菜单和轮播图特效
下一个:原生JS多条件筛选商品列表多级固定分类菜单代码

免责声明:本站模板均来自用户分享和网络收集,仅供学习研究,请勿用于商业用途,若损害您的权利,请联系网站客服,核实后立即删除。

瓦窑源码网专注织梦网站源码与静态模板分享,提供织梦模板,dedecms模板,织梦企业源码,dedecms商业源码和织梦免费模板下载

整站源码 - 静态模板 - 网页特效 - CMS教程 - 站长指南 - 热门排行 - XML - HTML - TAG - 免责声明

Copyright© 2021 瓦窑源码 WHY114.COM 版权所有 鲁ICP备20017802号-2

客服QQ:1847629575 微信号:qilujianzhan

展开