需要帮助来修复递归下拉菜单。
请访问 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;
}
答案 0 :(得分：0)
发现问题，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