無限級聯菜單渲染

1. html

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

 <nav  class="navbar navbar-expand-lg navbar-light bg-light" id="main_navbar">
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto" id="nav_ul">

                            </ul>
                        </div>
                    </nav>

2.css

.dropdown-menu {
    margin-top: 0;
}
.dropdown-menu .dropdown-toggle::after {
    vertical-align: middle;
    border-left: 4px solid;
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
}
.dropdown-menu .dropdown .dropdown-menu {
    left: 100%;
    top: 0%;
}

.dropdown-menu > li a:hover,
.dropdown-menu > li.show {
	background: #007bff;
	color: white;
}
.dropdown-menu > li.show > a{
	color: white;
}

3. js

$.fn.bootnavbar = function () {
                $(this).find('.dropdown').hover(function () {
                    $(this).addClass('show');
                    $(this).find('.dropdown-menu').first().addClass('show').addClass('animated fadeIn').one('animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd', function () {
                        $(this).removeClass('animated fadeIn');
                    });
                }, function () {
                    $(this).removeClass('show');
                    $(this).find('.dropdown-menu').first().removeClass('show');
                });
            };
        })(jQuery);
        $(function () {
            $('#main_navbar').bootnavbar();
        });
        var menusAttr = [{"id":1,"menu_name":"test1","pid":0,"link":"https:\/\/kudian.szdato.com\/","handler":null,"sort":1,"icon":""},{"id":6,"menu_name":"HOME","pid":0,"link":"\/index","handler":null,"sort":1,"icon":"","children":[{"id":5,"menu_name":"\u4f18\u60e0\u5546\u54c12","pid":6,"link":"\/product\/\u4f18\u60e0\u5546\u54c12","handler":"","sort":1,"icon":"","children":[{"id":11,"menu_name":"test3","pid":5,"link":"\/product\/\u4f18\u60e0\u5546\u54c12","handler":null,"sort":1,"icon":""}]}]},{"id":7,"menu_name":"Hand-held Mini Safe Stapler","pid":0,"link":"\/product\/hand-held-mini-safe-stapler_y3rz","handler":"hand-held-mini-safe-stapler_y3rz","sort":1,"icon":""}];
        var nav_obj = $('#nav_ul');
        getTree(nav_obj,menusAttr);
        var i = 0;


        function getTree(obj,menus) {
            for (let vo of menus) {
                if (vo.children != undefined) {
                    obj.append('<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="' + vo.link + vo.handler + '">' + vo.menu_name + '</a></li>');
                    let that = obj.children('li:last');
                    that.append('<ul class="dropdown-menu dropdown"></ul>');
                    that = that.children('ul');
                    getTree(that,vo.children)
                } else {
                    obj.append('<li class="nav-item dropdown"><a class="nav-link" href="' + vo.link + vo.handler + '">' + vo.menu_name + '</a></li>');
                }
            }
        }