Показать / скрыть дочерний элемент при щелчке по родительскому элементу, а внук при щелчке по дочернему элементу с помощью CSS - PullRequest
Новая
       5

Показать / скрыть дочерний элемент при щелчке по родительскому элементу, а внук при щелчке по дочернему элементу с помощью CSS

0 голосов
/ 03 октября 2018

Я отображаю элементы динамически, используя цикл 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;
}

Ответы [ 2 ]

0 голосов
/ 04 октября 2018

Попробуйте, я использовал jQuery для переключения вложенного класса: «Если вы щелкнете по родительскому списку, он переключится между показом / скрытием дочернего списка.

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

jQuery: 

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

HTML

Я также добавил идентификатор для ul с классом, вложенным для запуска. 

 <ul id="list" class="nested">
0 голосов
/ 03 октября 2018

В случае, подобном вашему, я бы попытался создать компоненты, представляющие отношения "Родитель" и "Дочерний".В вашем шаблоне Parent component вы отображаете свои Child component (s).

Кроме того, определите службу типа ShowChildrenService и добавьте ее в свои родительские компоненты.Вы обновляете ShowChildrenService через событие click для какого-либо родителя (вы также можете передать «id» родителя, если хотите).Каждый родитель выслушает эти события и решит, должны ли они отдавать своих детей.Вы также можете позволить родительскому элементу передать переменную своим дочерним элементам, которые, в свою очередь, устанавливают класс CSS с помощью директивы [ngClass].

...