javascript - Angular 下拉导航

Question

我正在尝试用 dropdown-navigation 以这种方式创建一个复杂的面包屑:

我正在努力解决外部点击问题:当我需要关闭元素外某处的下拉菜单时，但是如果我点击另一个导航项 - 它应该是打开的(只有一个同时打开面包屑)。

我是这样做的:

1) 我通过在父元素中包含一个 event.target 来检测 outsideClick

2) 通过关闭所有面包屑并打开需要的面包屑来进行切换。

simple example of breadcrumbs笨蛋

时间表:

     <ul #simpleBreadcrumbs>

      <li *ngFor="let breadcrumb of breadcrumbs"
        class="bread_item"
        (click)="toogleStateOfSubparagraphs(breadcrumb)">

        <div>
          <span>{{breadcrumb.label}}</span>
          <i class="icon-arrows-glyph-1_bold-down"
             *ngIf="!breadcrumb.isOpen">
          </i>
          <i class="icon-arrows-glyph-1_bold-up"
             *ngIf="breadcrumb.isOpen">
          </i>
        </div>


        <ul class="switcher__list dropdown__list"
            *ngIf="breadcrumb.isOpen">
          <li class="switcher__item dropdown__item" *ngFor="let subparagraph of breadcrumb.subparagraphs">
            <a class="switcher__item-href">
              {{subparagraph.label}}
            </a>
        </li>
    </ul>

  </ul>

组件类:

export class App {
  breadcrumbs:any[];

  @ViewChild('simpleBreadcrumbs') private _breadcrumbsTemplate: ElementRef;
  _currentOpenedBreadcrumbs:any;

  constructor() {
    this.breadcrumbs = [
      {
        label: 'First',
        isOpen: false,
        subparagraphs: [
          {
            label: '1.1'
          },
          {
            label: '1.2'
          }]
      },
      {
        label: 'Second',
        isOpen: false,
        subparagraphs: [
          {
            label: '2.1'
          },
          {
            label: '2.2'
          }]
      }];
  }

  toogleStateOfSubparagraphs(breadcrumb) {
     if (this._currentOpenedBreadcrumbs === breadcrumb) {
      this._closeSubparagraphs();
      this._currentOpenedBreadcrumbs = null;
      return;
    }
    this.breadcrumbs
      .forEach((bread: IBreadCrumb) => {
        bread.isOpen = false;
        if (bread === breadcrumb) {
          bread.isOpen = true;
        }
      });
    this._currentOpenedBreadcrumbs = breadcrumb;
  }

  _closeSubparagraphs() {
    this.breadcrumbs
      .map((bread) => {
        bread.isOpen = false;
        return bread;
      });
  }

  @HostListener('window:keydown', ['$event'])
  public onEscapeClick(event: KeyboardEvent): void {
    if (event.which === 27 && !this._breadcrumbsTemplate.nativeElement.contains(event.target as Node)) {
      this._closeSubparagraphs();
    }
  }

  @HostListener('document:click', ['$event'])
  public onOutsideClick(event: Event): void {
   if (!this._breadcrumbsTemplate.nativeElement.contains(event.target as Node)) {
      this._closeSubparagraphs();
    }
  }
}

Answer 1

我将您的 CSS 文件更改为:

.bread_item {
 list-style: none;
 float: left;
 padding: 30px;

这是您要找的吗？ 否则，我可能误解了您的问题。

您之前的 CSS 使得在单击第一个元素时第二个元素也被按下。