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

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

jQuery网站管理后台左侧边展开收缩图标菜单代码是一款侧边栏下拉菜单，支持收缩起来只显示图标，或展开显示图标和文字菜单。

1. js代码
   
2. 
   
3. <script type="text/javascript">
   
4. $(document).ready(function(){
   
5.     //展开收起
   
6.     $(".btn-nav").click(function () {
   
7.       $(".lvc-wrap").toggleClass("lvc-close")
   
8.       $("ol").toggleClass("small-ol")
   
9.       $(".next-layer ol").hide()
   
10. 
    
11.       if($("#lvc-nav").hasClass('lvc-close')){
    
12.         $(".next-layer ").removeClass("arrow")
    
13.       }
    
14.     })
    
15. 
    
16.     //选中状态
    
17.     $(".lvc-nav li").click(function () {
    
18.       $(this).siblings().find('ol').hide()
    
19.       $(this).addClass("active").siblings().removeClass("active")
    
20.     })
    
21. 
    
22.     //选中子集清除父级active
    
23.     $("ol>li").click(function (e) {
    
24.       console.log('ol>li clicked')
    
25.       e.stopPropagation()
    
26.      $(this).parent().parent().removeClass("active")
    
27.     })
    
28. 
    
29.     //二级导航展开收起
    
30.     $(".next-layer").click(function () {
    
31.       $(this).children("ol").toggle();
    
32.       $(this).toggleClass("arrow").siblings().removeClass("arrow")
    
33.     })
    
34. 
    
35. 
    
36.      $("ol li").click(function () {
    
37.        if($("ol").hasClass('small-ol')) {
    
38.          $(".small-ol").hide();
    
39.          $(this).parent().parent().addClass("active")
    
40.        }
    
41.      })
    
42. })
    
43. </script>

复制代码

jQuery网站管理后台左侧边展开收缩图标菜单代码.zip (48.07 KB, 下载次数: 441)

2021-2-22 11:28 上传

点击文件名下载附件
jQuery网站管理后台左侧边展开收缩图标菜单代码