kątowa rozwijane nawigacja

Question

Próbuję utworzyć złożonych bułkę tartą z rozwijanej-nawigacji w taki sposób:

jestem zmaga się z poza kliknięciem emisyjnej: kiedy muszę zamknij dropdown po kliknięciu gdzieś poza tym elementem, ALE jeśli kliknę inny element nawigacji - powinien być otwarty (w tym samym czasie jest tylko jedno otwarte menu nawigacyjne).

zrobiłem w taki sposób:

1) wykryć outsideClick przez zawierający event.target w elementu nadrzędnego

2) Przełączanie się stało, zamykając wszystkie okruszki i otworzył jedną, która jest potrzebna.

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> 

klasa komponent:

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

Zmieniłem plik CSS:

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

}

Czy tego właśnie szukasz? Jeśli nie, to może źle zinterpretowałem twoje pytanie.

Twoje poprzednie css sprawiło, że drugi element został przesunięty w dół po kliknięciu pierwszego elementu.