如何为多级下拉菜单编写递归函数？

Question

我在这里准备好了一个 jsfiddle： https ://jsfiddle.net/mzsj9dxn/11/

我有一个 JSON 格式的类别列表，用于我正在处理的博客，该博客有一个子类别和一个父类别。

现在我只有几个需要的类别，但需要注意的一件重要事情是只有最终子类别包含博客。 就像它们都是文件夹，只有最后一个文件夹才会有文件。

我需要遍历每个类别以在引导程序中创建一个下拉菜单。 我不想列出任何博客，只列出类别。 我已经有一个非常简单的下拉菜单，它可以运行到第三级，但是我无法将它们放在一起，以使下拉菜单具有五个级别的多级。 我相信我需要某种递归函数，但我无法弄清楚如何去做。

 // My Categories cats = [{ "parentCategory": "All Categories", "childCategory": "Personal", "postID": "01", "description": "Different posts that I have made mostly consisting of Rants and Raves" }, { "parentCategory": "All Categories", "childCategory": "Truth Seekers", "postID": "02", "description": "If you have realized that the world you live in is strange. Then this is a good place to start learning about the truth. " }, { "parentCategory": "Truth Seekers", "childCategory": "Satellites Orbiting the Earth", "postID": "021", "description": "Information about the existence of satellites orbiting the Earth" }, { "parentCategory": "Truth Seekers", "childCategory": "Size of the Earth", "postID": "022", "description": "Information about the true size of the earth" }, { "parentCategory": "Truth Seekers", "childCategory": "Mandela Effect", "postID": "023", "description": "Information about the Mandela Effect" }, { "parentCategory": "Mandela Effect", "childCategory": "Lists of Changes", "postID": "0231", "description": "Lists of changes from the Mandela Effect" }, { "parentCategory": "Personal", "childCategory": "Rants", "postID": "011", "description": "Some posts where I blow off some steam about stuff that really irritates me" }, { "parentCategory": "Personal", "childCategory": "Raves", "postID": "012", "description": "Some posts where I show gratitude for things that are good" }, { "parentCategory": "Personal", "childCategory": "Misc", "postID": "013", "description": "Random posts about random stuff" }]; var $dropdown = $('ul.dropdown-menu.multi-level'); var children = getChildren('All Categories', cats); for (var i = 0; i < children.length; i++) { var $parentLink = $('<a href="#/categories/' + encodeURIComponent(cats[children[i]]['parentCategory']) + '" >' + cats[children[i]]['parentCategory'] + '</a>'); var $childLink = $('<a href="#/categories/' + encodeURIComponent(cats[children[i]]['childCategory']) + '" >' + cats[children[i]]['childCategory'] + '</a>'); if (hasChildren($childLink.text(), cats)) { var $liLabel = $('<li class="dropdown-submenu" />'); $parentLink.attr('tabindex', '-1'); $liLabel.append($childLink); var $ul = $('<ul class="dropdown-menu"></ul>'); var childrensChildren = getChildren($childLink.text(), cats); for (var x = 0; x < childrensChildren.length; x++) { var $ParentsparentLink = $('<a href="#/categories/' + encodeURIComponent(cats[childrensChildren[x]]['parentategory']) + '" >' + cats[childrensChildren[x]]['parentCategory'] + '</a>'); var $ChildschildLink = $('<a href="#/categories/' + encodeURIComponent(cats[childrensChildren[x]]['childCategory']) + '" >' + cats[childrensChildren[x]]['childCategory'] + '</a>'); var $li = $('<li />'); $li.append($ChildschildLink); $ul.append($li); } $liLabel.append($ul); $dropdown.append($liLabel); } // End if hasChildren else { var $li = $('<li />'); $li.append($childLink); $dropdown.append($li); } } // End for loop function getChildren(category, categories) { var results = $.map(categories, function(element, index) { if (element.parentCategory === category) { return index; } }); return results; } function hasChildren(category, categories) { var results = $.map(categories, function(element, index) { if (element.parentCategory === category) { return index; } }); if (results != undefined && results != null) { return true; } return false; }

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <li class=""> <div class="dropdown" ng-controller="dropDownController"> <div role="button" data-toggle="dropdown" class="btn btn-primary"> Dropdown <span class="caret"></span> </div> <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> <li><a href="#">Some action</a></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">Hover me for more options</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Second level</a></li> <li class="dropdown-submenu"> <a href="#">Even More..</a> <ul class="dropdown-menu"> <li><a href="#">3rd level</a></li> </ul> </li> </ul> </li> </ul> </div> </li>

Answer 1

使用 AngularJs 的解决方案

我们在我们的网络产品中具有类似类型的功能，用于根据用户的登录角色使用不同的功能或访问页面。 我们在前端使用 Angular Js、jQuery 等。 我必须为不同角色的用户构建一个动态的多级下拉菜单。 我的朋友通过使用角度“ng-template”帮助我做到了这一点。

首先，您可以创建一个对象数组，例如嵌套对象，其中每个父项将在其中包含其所有子项。 然后使用“ngRepeat”迭代数组并使用“ng-template”进行递归迭代，直到父项的最后一个子项。 在 ngRepeat divsion 中使用 ul & li 创建下拉列表。

参考示例