无限层菜单

最新推荐文章于 2022-12-06 21:05:45 发布

祝英超

最新推荐文章于 2022-12-06 21:05:45 发布

阅读量415

点赞数 1

分类专栏：小插件文章标签：无限层菜单多级菜单多级列表

本文链接：https://blog.csdn.net/qq_40002279/article/details/84958582

版权

小插件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

无限层菜单插件

我们可能遇到过二级菜单、三级菜单…。但是如果菜单有多少层不固定怎么办呢？也就是说有多少层子菜单完全看后台返回的数据。工作中我也遇到了这种情况，于是就自己写了一个方法把它渲染了一下，希望对大家有帮助。
代码运行效果

废话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background: #f2f8ff;
        }
        .nav-left{
            background-color: #fff;
            max-width: 300px;
            min-height: 400px;
            padding:20px 30px;
            line-height: 35px;
            font-size: 14px;
            color:#333333;
        }
        div.first-nav{
            display:block;
        }
        .nav-item{
            display: none;
        }
        .nav-item span{
            border-radius: 50%;
            display: inline-block;
            width:15px;
            height:15px;
            line-height: 14px;
            text-align: center;
            vertical-align: middle;
            border:1px solid #333;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="nav-left"></div>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script>
        var numOfNav=0;//第几层，默认从0开始
        var backdata={//模拟的json数据
            data:[
                {
                    name:'全部校区',
                    data:[
                        {
                            name:'郑州职业技术学院',
                            num:500,
                            data:[
                                {
                                    name:'网络营销',
                                    num:300,
                                    data:[
                                        {
                                            name:'网络营销1班',
                                            num:100
                                        },
                                        {
                                            name:'网络营销2班',
                                            num:200
                                        }
                                    ]
                                },
                                {
                                    name:'移动应用开发',
                                    num:300,
                                    data:[
                                        {
                                            name:'移动应用开发1班',
                                            num:200
                                        },
                                        {
                                            name:'移动应用开发2班',
                                            num:100
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            name:'河南测绘技术学院',
                            num:500,
                            data:[
                                {
                                    name:'网络营销',
                                    num:300,
                                    data:[
                                        {
                                            name:'网络营销1班',
                                            num:100
                                        },
                                        {
                                            name:'网络营销2班',
                                            num:200
                                        }
                                    ]
                                },
                                {
                                    name:'移动应用开发',
                                    num:300,
                                    data:[
                                        {
                                            name:'移动应用开发1班',
                                            num:200,
                                            data:[
                                            {
                                                name:'小明',
                                                num:100
                                            },
                                        {
                                            name:'小红',
                                            num:100
                                        }
                                    ]
                                        },
                                        {
                                            name:'移动应用开发2班',
                                            num:100
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        };

        function createNav(elem,data,index){//创建菜单 elem为菜单的父元素，data为数据,index为渲染的层数从1开始
            for(var i in data){
                numOfNav++
                var str='';
                str+='<div style="padding-left:'+(index*4)+'px" class="nav-'+index+' nav-item elem'+numOfNav;
                if(index==1){
                    str+=' first-nav';
                }
                str+='">';
                if(typeof(data[i].data)!='undefined'&&data[i].data.length!=0){
                    str+=    '<span state="add">+</span>&nbsp;';
                }
                str+=data[i].name;
                if(typeof(data[i].num)!='undefined'){
                    str+='('+data[i].num+')';
                }
                str+='</div>';
                elem.append(str);
                if(typeof(data[i].data)!='undefined'&&data[i].data.length!=0){
                    createNav($('.elem'+numOfNav),data[i].data,index+1);
                }
            }
        }

        $(function(){
            createNav($('.nav-left'),backdata.data,1);//创建菜单

            $('body').on('click','.nav-item span',function(){//绑定各级菜单展开与闭合事件
                if($(this).attr('state')=="add"){
                    $(this).text('-');
                    $(this).attr('state','decrease');
                    $(this).parent('.nav-item').children('.nav-item').show();
                }else{
                    $(this).text('+');
                    $(this).attr('state','add');
                    $(this).parent('.nav-item').children('.nav-item').hide();
                }
                
            })
        })
    </script>
</body>
</html>

以上代码直接复制到浏览器上打开即可看到效果,因为之前做的项目是PC端的，所以这个样式也是pc端的。如果需要，样式可以自行更改，使用这个方法需要使用的数据格式与backdata的数据格式一致，前端菜鸟一枚，不足之处请前辈们指教，谢谢！