角度ドロップダウンナビゲーション

Question

私は、このような方法で、ドロップダウン・ナビゲーションと複雑なパンくずリストを作成しようとしています：

私は外クリック問題で苦労している：私はする必要がある場合要素のどこかをクリックして閉じるドロップダウンメニューですが、別のナビゲーション項目をクリックした場合は開く必要があります（同時に開いているブレッドクラムは1つだけです）。

1）私はすべてのパン粉を閉じて

2）スイッチングが起こっている親要素でevent.targetを含むことにより、outsideClick検出して、必要とされているものを開く：

は、私は、このような方法で行いました。

simple example of breadcrumbs Plunker

timeplate：

 <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> 

コンポーネントクラス：

私はあなたのCSSファイルを変更し

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

へ：

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

}

これはあなたが探していたものですか？ そうでなければ、私はあなたの質問を誤解しているかもしれません。

以前のCSSでは、2番目の要素も最初の要素をクリックするとプッシュダウンされました。