【问题标题】：Show/hide child on parent click and grandchild on child click using CSS使用 CSS 在父单击时显示/隐藏子项，在子项单击时显示/隐藏子项
【发布时间】：2019-03-09 02:17:03
【问题描述】：

我正在使用 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;
}

【问题讨论】：

只有 CSS 是不可能的，你不能使用 CSS 来处理点击事件。

标签： html css angular css-selectors ngfor

【解决方案1】：

在像你这样的情况下，我会尝试制作代表“父”和“子”关系的组件。在您的 Parent component 模板中渲染您的 Child component(s)。

另外定义一个像ShowChildrenService 这样的服务并将它注入到你的父组件中。您可以通过某个父级上的单击事件更新ShowChildrenService（如果您愿意，也可以传递父级的“id”）。每个父母都会听取这些事件并决定他们是否应该渲染他们的孩子。您还可以让父级将变量传递给其子级，而子级又通过 [ngClass] 指令设置 CSS 类。

【讨论】：

【解决方案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">

【讨论】：