Javascript 更改css子元素导航树

我们的菜单是从一个.json文件加载的，有些链接可能有子元素，这些子元素可以有自己的子元素。子元素应该越深越暗

起初，ID类似于：

1
**1-1
**1-2
2
3
**3-1
**3-2
****3-2-1
4

所以我可以很容易地计算字符和定义级别

但是，现在ID已更改为：

1
**2
**3
4
**5
**6
***7

这使得无法根据id定义级别

有没有办法知道子元素有多深

<md-list-item ng-repeat="item in menus">
   <md-button ng-if="!(item.children.length > 0)" ng-class="{ selected: isSelected(item) }"></md-button>
   <md-button ng-if="item.children.length > 0"></md-button>
   <md-list ng-if="item.children" report-tree menus="item.children">
  </md-list>
</md-list-item>

---

识别子元素级别的一种方法是使用递归包含的模板，每次包含模板时，使用

ng init

增加一个范围变量

例如：

初始ng包括：

我们将一个名为“level”的范围变量设置为0

模板：

<div ng-repeat="item in items" ng-style="{'background-color': 'rgba(255, 0, 0, 0.5)'}">

  <span ng-style="{'padding-left': (25 * level) + 'px'}">{{item.title}}</span>

  <!-- if the item has children, include the template again -->
  <div ng-if="item.children.length > 0">
    <!-- set the next template's items to be the children of the current item -->
    <!-- increment level by 1 -->
    <div ng-init="items = item.children; level = level + 1;" ng-include="'item.html'"></div>
  </div>
</div>

{{item.title}

因此，如果项目有子项，请再次包含模板。对于该模板，我们将其项定义为当前项的子项，并将

级别

变量增加1

如果查看

上的

ng样式

，可以看到如何使用此

级别

变量。在本例中，每个级别都将增加填充。级别0将有0填充，级别1将有25px填充，依此类推

至于在你下楼时改变物品的颜色，我原本以为我可以做到这一点，就像我在

上用

级别

填充来计算一个值一样

在下面的plunker中，每个项目的不透明度为0.5。当一个项目有子项目时，在其上方添加另一个不透明度为0.5的元素，有效地将下方项目的可见不透明度减半。因此，对于具有3个项目级别的plunker中的示例，级别0上项目的不透明度为

0.5*0.5*0.5

，相当于

0.125

，而级别1显示为0.25，级别2显示为0.5

---

我不确定这是否对您的角材料代码有任何帮助。如果

md列表

的子元素是

md列表

元素的子元素，可能添加不透明度为0.5的背景色也可以达到同样的效果。

！洁净易解