Açısal Açılan gezinti

Question

Böyle bir şekilde açılır-navigasyon ile bir karmaşık kırıntıları oluşturmaya çalışıyorum:

Ben dışında tıklama konu ile mücadele ediyorum: Ben gerektiğinde açılan menüden başka bir yere tıklamak üzerine kapat, ama başka bir navigasyon öğesine tıklarsam - açık olmalı (aynı anda sadece bir tane açılmış ekmek kırığı var).

1) tüm galeta unu kapatarak

2) Anahtarlama oldu edilir ana elemanının bir event.target içermesi ile outsideClick tespit etmek ve gerekli olan bir açılmış:

Böyle bir şekilde yaptı.

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> 

bileşen sınıfı:

Ben senin CSS dosyasını değiştirdi

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

için:

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

}

Aradığınız şey bu mu? Değilse, sorunuzu yanlış yorumlamış olabilirim.

Önceki css'niz, ikinci öğenin ilk öğeye tıklandığında da aşağı itileceği şekilde yaptı.