Question

有人可以帮助我解决此问题吗？

我有一个多级导航栏，其中放置了从数据库中获取的菜单项，菜单的结构是这样的

Mens
   >T-Shirt
           >Mufti
           >Jhon Player
   >Shirt
           >Mufti
           >Jhon Player

但是当它出现在导航栏中时，它仅显示第一个父项（男子），然后显示一个下拉菜单（T恤和衬衫）

没有品牌名称子菜单。

http://webdreaminfotech.com/user/display_category

/* AngularJs Code Start from Here */
var ecommerce_user_app=angular.module('ecommerce_user_app',['ngAnimate', 'ngSanitize', 'ui.bootstrap','ngRoute','ui.router']);
ecommerce_user_app.controller('ecommerce_user',['$http','$scope',function($http,$scope){
    /* Navigation Bar Dat   */
    $http.get('http://webdreaminfotech.com/user/display_category').then(function(response){
        $scope.navbar_data=response.data.data;  
        console.log($scope.navbar_data);
    });

//End of Controller
}]);

#navigation .navbar-nav li a{
    text-transform:uppercase;
}
#navigation .dropdown-menu1{
    position: absolute;
    margin-left: 40px;
    display:none;
}
#navigation .dropdown-submenu {
  position: relative;
}
#navigation .dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

<!DOCTYPE html>
<html ng-app="ecommerce_user_app">

<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">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>DownTowm Mart: Leading E-Commerce Platefrom</title>
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/user_main.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body ng-controller="ecommerce_user">
    <section id="navigation">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                <a class="navbar-brand" href="#">Hidden brand</a>
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <li class="nav-item dropdown" ng-repeat="navbar_li in navbar_data track by $index">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{navbar_li.category_name}}
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li class="dropdown-submenu"  ng-repeat="navbar_sub_li in navbar_li.sub_category  track by $index">
                                <a class="dropdown-item dropdown-toggle" href="#">{{navbar_sub_li.sub_category_name}}</a>
                                <ul class="dropdown-menu">
                                    <li ng-repeat="navbar_sub_sub_li in navbar_sub_li.sub_sub_category  track by $index">
                                        <a class="dropdown-item" href="#">{{navbar_sub_sub_li.sub_sub_category_name}}</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </section>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.min.js"></script>
    <script src="../js/ui-bootstrap-tpls-2.5.0.min.js"></script>
    <script src="../js/user_main.js"></script>
    <script src="../js/json.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script>
    $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
      if (!$(this).next().hasClass('show')) {
        $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
      }
      var $subMenu = $(this).next(".dropdown-menu");
      $subMenu.toggleClass('show');

      $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
        $('.dropdown-submenu .show').removeClass("show");
      });


      return false;
    });
    </script>
<!-- Script End Here-->
</body>
</html>

Nav1

Nav2

多级导航并设置从数据库中获取的数据

0 个答案: