Отображать одно активное меню за раз

Question

Как мне go отображать подменю навигации по одному с использованием директивы или другого рекомендуемого способа?

Пользователь должен иметь возможность щелкнуть любое меню, которое должно закрыть любое другое активное меню

Проблема, которую я пытаюсь обойти, заключается в том, чтобы сначала удалить класс .active из других дочерних элементов li?

<nav class="site-nav">
  <ul>
    <li appExpandMenu class="site-nav-item active">Menu 1 ...sub menu options</li>
    <li appExpandMenu class="site-nav-item">Menu 2 ...sub menu options</li>
  </ul>
</nav>


import {Directive, HostBinding, HostListener, Renderer2} from '@angular/core';

@Directive({
  selector: '[appExpandMenu]',
})
export class ExpandMenuDirective {

  constructor(private renderer: Renderer2) {}

  @HostBinding('class.active') isOpen = false;

  @HostListener('click')
  toggleOpen() {
    // todo remove .active class from all other li elements
    this.isOpen = !this.isOpen;
  }

}

Answer 1

Теоретически вы можете прослушать событие mouseout в вашей директиве и закрыть меню, предполагая, что меню не должно сохраняться при перемещении курсора мыши.

Если нет, то директива излишне для вас требование. Это должно сделать что-то тривиальное, например, следующее:

Компонент:

private classActivate = 'active';
private menus = [ 'submenu1', 'submenu2', 'submenu3', 'submenu4' ];

public onMouseUp(event) {
  const id = event.currentTarget.id;
  for (const menu of this.menus) {
    if (id === menu) {
      this.toggleActivation(event.currentTarget);
    } else {
      this.deactivate(event.currentTarget);
    }
  }
}

private toggleActivation(target: Element) {
  if (target.classList.contains(this.classActivate)) {
    target.classList.remove(this.classActivate);
  } else {
    target.classList.add(this.classActivate);
  }
}

private deactivate(target: Element) {
  if (target.classList.contains(this.classActivate)) {
    target.classList.remove(this.classActivate);
  }
}

Шаблон:

<nav class="site-nav">
  <ul>
    <li id="submenu1" class="site-nav-item active" (mouseup)="onMouseUp($event)">Menu 1 ...sub menu options</li>
    <li id="submenu2" class="site-nav-item" (mouseup)="onMouseUp($event)">Menu 2 ...sub menu options</li>
    <li id="submenu3" class="site-nav-item" (mouseup)="onMouseUp($event)">Menu 3 ...sub menu options</li>
    <li id="submenu4" class="site-nav-item" (mouseup)="onMouseUp($event)">Menu 4 ...sub menu options</li>
  </ul>
</nav>