Thả xuống góc hướng

Question

tôi đang cố gắng để tạo ra một breadcrumbs phức tạp với thả xuống-navigation theo cách như vậy:

Tôi đang phải vật lộn với nhấp chuột bên ngoài vấn đề: khi tôi cần đóng thả xuống khi nhấp vào một nơi nào đó ra khỏi phần tử, NHƯNG nếu tôi nhấp vào một mục điều hướng khác - nó sẽ được mở (chỉ có một mở đường dẫn trong cùng một thời gian).

tôi đã làm theo cách như vậy:

1) Tôi phát hiện outsideClick bởi có chứa một event.target trong yếu tố phụ huynh

2) Switching được xảy ra bằng cách đóng tất cả vụn bánh mì và mở một trong đó là cần thiết.

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> 

thành phần lớp:

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

tôi đã thay đổi tập tin CSS của bạn để:

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

}

Đây có phải là những gì bạn đang tìm kiếm không? Nếu không, có thể tôi đã hiểu sai câu hỏi của bạn.

Css trước đó của bạn đã tạo thành phần tử thứ hai cũng bị đẩy xuống khi nhấp vào phần tử đầu tiên.