jQuery网站左侧展开收缩图标导航菜单代码
时间:2019-11-15 10:18:15 来源:网络收集 作者:不详 点击:次
源码授权:
免费特效
运行环境:
jQuery
源码大小:
44 KB
普通会员
一款基于jQuery制作的网站左侧展开收缩图标导航菜单代码,收缩时只显示图标,展开时则显示图标和菜单名称,还支持二级菜单。 js代码 <script src="jquery-3.4.1.min.js"></script> <script> $(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> |