Question

需要帮助来修复递归下拉菜单。

请访问 http://plnkr.co/edit/1mKljtoS9R0gAdACLxu7?p=preview

此应用不仅适用于桌面。在单独的窗口中打开预览，否则您将看不到菜单。

菜单不会像他们想象的那样下拉。所以请帮忙

        //index.html
        <!DOCTYPE html>
            <html ng-app="app">

            <head>
            <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

            <link rel="stylesheet" type="text/css" href="style.css" />

<script src="//code.jquery.com/jquery-2.1.1.js"></script>
            <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
            <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>

            <script src="script.js"></script>
            </head>

            <body ng-controller="menuCtrl">

            <script type="text/ng-template" id="tree-renderer.html">
             <a class="dropdown-toggle" data-toggle="dropdown" href="#{{menuItem.title}}">{{menuItem.title}}
                <b ng-if="menuItem.children.length > 0" class="caret"></b></a>
             <ul class="dropdown-menu">
                <li class="dropdown-submenu" ng-repeat="menuItem in menuItem.children" ng-include="'tree-renderer.html'"></li>
             </ul>
            </script>

            <div class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">VARCITI</a>
                    </div>

                    <div class="collapse navbar-collapse">
                          <ul class="nav navbar-nav">
                            <li ng-repeat="menuItem in menuItems" ng-include="'tree-renderer.html'"></li>
                          </ul>
                          </div>
                    </div>
            </div>

                    <div id="main" class="container main">
                        <div ng-view></div>
                    </div>
            </body>
            </html>


    // script.js
        var app = angular.module('app', []);

        app.controller('menuCtrl', function($scope) {
          $scope.menuItems = [{"id":3,"title":"Breaks","children":[{"id":32,"title":"Recon","children":[{"id":322,"title":"Transactions","children":[]},{"id":321,"title":"Matching","children":[]}]},{"id":31,"title":"Exception","children":[]}]},{"id":4,"title":"Reference","children":[{"id":46,"title":"User Setup","children":[{"id":463,"title":"User Role","children":[]},{"id":462,"title":"User Group","children":[]},{"id":461,"title":"User","children":[]}]},{"id":44,"title":"Currency","children":[{"id":443,"title":"FX Rates","children":[]},{"id":441,"title":"Currency","children":[]},{"id":442,"title":"Currency Group","children":[]}]},{"id":45,"title":"Product Code","children":[]},{"id":41,"title":"Instrument","children":[]},{"id":43,"title":"Party","children":[{"id":435,"title":"Legal Entity","children":[]},{"id":431,"title":"Broker","children":[]},{"id":434,"title":"Client","children":[]},{"id":433,"title":"Exchange","children":[]},{"id":432,"title":"Trader","children":[]}]},{"id":42,"title":"Trading Account","children":[]}]},{"id":2,"title":"Rules","children":[{"id":21,"title":"Rate Matrix","children":[{"id":211,"title":"Rates","children":[]},{"id":212,"title":"Charges","children":[]}]},{"id":22,"title":"Matching","children":[]},{"id":23,"title":"Transformation","children":[]}]},{"id":1,"title":"Analytics","children":[{"id":12,"title":"Transactions","children":[]},{"id":13,"title":"Reports","children":[]},{"id":11,"title":"Dashboard","children":[]}]},{"id":5,"title":"Review","children":[{"id":56,"title":"Invoice","children":[{"id":562,"title":"Receipt","children":[]},{"id":561,"title":"Generation","children":[]}]},{"id":54,"title":"Matching","children":[{"id":543,"title":"GU2 Recon","children":[]},{"id":542,"title":"Monthly","children":[]},{"id":541,"title":"Daily","children":[{"id":5412,"title":"Monthly","children":[]},{"id":5411,"title":"Daily","children":[]}]}]},{"id":53,"title":"Invoice","children":[{"id":532,"title":"Capture","children":[]},{"id":531,"title":"Recon","children":[]}]},{"id":51,"title":"Cost Center","children":[]},{"id":52,"title":"Manual Accruals","children":[{"id":521,"title":"View/Create","children":[]},{"id":523,"title":"Review","children":[]},{"id":522,"title":"Bulk Upload","children":[]}]},{"id":55,"title":"Exception","children":[]}]}];
        });

    //styles.css

    .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;
    }

Answer 1

发现问题，href href="#{{menuItem.title}}"中的＃以某种方式导致异常。删除＃后它可以工作。有人能解释一下原因吗？

Uncaught Error: Syntax error, unrecognized expression: #View/Create jquery-2.1.1.js:1437
Sizzle.error jquery-2.1.1.js:1437
Sizzle.tokenize jquery-2.1.1.js:2051
Sizzle.select jquery-2.1.1.js:2452
Sizzle jquery-2.1.1.js:843
jQuery.fn.extend.find jquery-2.1.1.js:2668
jQuery.fn.init jquery-2.1.1.js:2776
jQuery jquery-2.1.1.js:76
getParent bootstrap.js:775
(anonymous function) bootstrap.js:758
jQuery.extend.each jquery-2.1.1.js:375
jQuery.fn.jQuery.each jquery-2.1.1.js:139
clearMenus bootstrap.js:757
Dropdown.toggle bootstrap.js:699
jQuery.event.dispatch jquery-2.1.1.js:4409
elemData.handle jquery-2.1.1.js:4095

递归menuItems无法正确呈现

1 个答案: