Bootstrap多级下拉菜单

最新推荐文章于 2024-08-16 08:10:04 发布

小宋想站起来

最新推荐文章于 2024-08-16 08:10:04 发布

阅读量2.6k

点赞数

分类专栏： Web应用程序

本文链接：https://blog.csdn.net/songziyuan_/article/details/107303825

版权

这篇博客介绍了如何利用Bootstrap构建多级下拉菜单。首先，需要将数据转化为树形结构，然后通过一个递归函数来拼接生成菜单栏。在页面初始化时调用此功能，并且确保引入了Bootstrap和jQuery的必要样式和脚本文件。

摘要由CSDN通过智能技术生成

首先需要将数据组装成树状数据,就这个样子的数据

组装数据的函数如下：

    //组装数据 pId为父节点的id
    function rec(data,id){
        var arr = [];
        for (var i = 0; i < data.length; i++) {
            //如果是当前节点子节点
            if(data[i].pId == id){
                //深度遍历
                var children = rec(data,data[i].id);
                data[i].children = children;
                arr.push(data[i]);
            }
        }
        return arr;
    }

组装数据后可以将递归将数据拼接成菜单栏，拼接函数如下，递归不是很好理解，可以多看几遍

    //加载导航栏，页面初始化时加载多级菜单
    $(function () {
        $.post({
            url:"<%=request.getContextPath()%>/UserController/findPerByUserId.do",
            dataType:"json",
            success:function (data) {
                //组装数据
                var perData = rec(data,1);
                //拼接菜单栏
                var navHtml = menu(perData,1);
                //拼接完成
                $("#navUl").html(navHtml);
            },error:function () {
                alert("系统BUG");
            }
        })
    })

通过页面初始化函数加载菜单栏