Bootstrap多级下拉菜单

 

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

组装数据的函数如下：

    //组装数据 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");
            }
        })
    })

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

//加载导航栏
    $(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");
            }
        })
    })

需要引入样式和css、js文件，引入Bootstrap和jQuery的css、js文件即可

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- 引入jq -->
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jq/jquery-3.3.1.min.js"></script>
    <!-- 引入bootstrap -->
    <link href="<%=request.getContextPath()%>/js/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <!-- 引入datatables -->
    <link href="<%=request.getContextPath()%>/js/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/DataTables/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/date-format.js"></script>
    <!-- 引入datetimepicker -->
    <link href="<%=request.getContextPath()%>/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"/>
    <!-- 引入locales 设置语言 -->
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap-datetimepicker/js/moment-with-locales.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <!-- 引入bootbox -->
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootbox/bootbox.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootbox/bootbox.locales.min.js"></script>
    <!-- 上传文件插件 -->
    <link href="<%=request.getContextPath()%>/js/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <!--zTree-->
    <link href="<%=request.getContextPath()%>/js/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/zTree/js/jquery.ztree.all.min.js"></script>
    <%-- validate--%>
    <link href="<%=request.getContextPath()%>/js/bootstrapvalidator-v0.5.2-0/dist/css/bootstrapValidator.min.css" rel="stylesheet" type="text/css">
    <script src="<%=request.getContextPath()%>/js/bootstrapvalidator-v0.5.2-0/dist/js/bootstrapValidator.min.js"></script>

    <style>
        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px;
            border-radius: 0 6px 6px 6px;
        }

        .dropdown-submenu:hover > .dropdown-menu {
            display: block;
        }

        .dropdown-submenu > a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #ccc;
            margin-top: 5px;
            margin-right: -10px;
        }

        .dropdown-submenu:hover > a:after {
            border-left-color: #fff;
        }

        .dropdown-submenu.pull-left {
            float: none;
        }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }
    </style>