Question

我已经准备好了这个问题：https://jsfiddle.net/mzsj9dxn/11/

我在JSON中有一个类别列表，其中包含我正在处理的具有子类和父类别的博客。

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

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

// 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创建下拉列表。

Example for Reference

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

1 个答案: