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多条件筛选商品列表多级固定分类菜单代码
精品源码
精品模板
免责声明:本站模板均来自用户分享和网络收集,仅供学习研究,请勿用于商业用途,若损害您的权利,请联系网站客服,核实后立即删除。