jQuery：

Question

我正在使用Angular 6 * ngFor循环动态显示元素。我有一个三级体系结构。我想在ul-li-a结构中显示父元素单击上的内部元素和内部元素单击上的最内部元素。仅使用CSS。

活动链接获取.activeLink类

<ul id="myUL">
    <li *ngFor="let clientParent of sourceData;">
      <a class="caret" routerLinkActive="activeLink" routerLink="..">{{clientParent.shortName}}</a>
      <ul class="nested">
        <li *ngFor="let clientFund of clientParent.counterpartyFunds" class="list-none">
          <a routerLinkActive="activeLink" routerLink="..">{{clientFund.name}}</a>
          <ul class="inner">
            <li *ngFor="let fundAccount of clientFund.fundAccounts">
              <a routerLinkActive="activeLink" routerLink="..">
                {{fundAccount.shortName}}
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

CSS：

a.activeLink {
  color:red;
}

.nested {
  display: none;
}

a.activeLink + ul {
  display: block;
}

Answer 1

在像您这样的情况下，我将尝试制作代表“父母”和“孩子”关系的组件。在.test { margin: 100px 10px 20px 20px; }模板中，渲染<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet" /> <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script> <div class="wrapper"> <div class="clickable" style="margin:100px 10px 20px 20px;"></div> </div>。

另外定义一个服务，例如$versionArray | ForEach-Object {[System.Version]$_} | Sort-Object -Property minor -Descending并将其注入到您的Parent组件中。您可以通过某个父项的click事件来更新Parent component（如果愿意，您还可以传递父项的'id'）。每个父母都将听这些事件，并决定是否还应让自己的孩子。您还可以让父级将变量传递给其子级，而子级又通过Child component指令设置CSS类。

Answer 2

尝试一下，我使用jQuery切换了嵌套的类” 如果单击父列表，它将在显示/隐藏子列表之间切换。

jsFiddle：https://jsfiddle.net/cg9ruao1/

jQuery：

$('#myUL li').on('click', function (e) {
       $('ul#list').toggleClass('nested');
    });

HTML

我还为ul添加了一个ID，其中嵌套了要触发的类。

 <ul id="list" class="nested">

使用CSS在父级单击上显示/隐藏子项，在子级单击上显示/隐藏子项

2 个答案:

jQuery：

HTML