使用Angular 2動畫創建手風琴導航

Question

我正在嘗試在Angular 2中創建一個可折疊的手風琴菜單。目前，我的代碼允許使用Angular 2動畫擴展和縮回子菜單。 問題是我需要在單擊父級時擴展某個子菜單。

我目前的設置如下：

<nav>
<ul>
  <li>
    <span (click)="toggleSubMenu()">
      List Item 1
    </span>
    <ul [@subMenuToggle]="subMenuState" class="sub-menu">
      <li><a href="#">New</a></li>
      <li><a href="#">Edit</a></li>
      <li><a href="#">Remove</a></li>
    </ul>
  </li>
  <li>
    <span (click)="toggleSubMenu()">
      List Item 2
    </span>
    <ul [@subMenuToggle]="subMenuState" class="sub-menu">
      <li><a href="#">New</a></li>
      <li><a href="#">Edit</a></li>
      <li><a href="#">Remove</a></li>
    </ul>
  </li>
 </ul>
 </nav>

現在當我點擊其中一個主菜單項（列表項1或2）時，兩個子菜單都會展開。 （我只想擴展相應的子子菜單）

我當前的動畫觸發器如下所示：

trigger('subMenuToggle',[
  state('subMenuSelected', style({opacity: '1', height: '*'})),
  state('subMenuDeselected', style({opacity: '0', height: '0px', overflow: 'hidden'})),
  transition('subMenuSelected <=> subMenuDeselected', [
    animate('150ms ease-out')
  ])
])

並且toggleSubMenu（）方法更改狀態：

 export class NavSidebarComponent {

  subMenuState: string = 'subMenuDeselected';


  toggleSubMenu() {
    this.subMenuState = (this.subMenuState === 'subMenuSelected' ? 'subMenuDeselected' : 'subMenuSelected');
  }

}

有沒有一種很好的方法來使用toggleSubMenu（）方法來確定單擊哪個菜單項，然后展開相應的子菜單？ 或者我是否必須分別為每個父菜單項創建一個切換方法？

謝謝

Answer 1

我實際上無法在沒有為每個列表項創建方法的情況下使用動畫來解決這個問題，因此我采用了不同的路徑並決定為下拉效果創建自定義指令。 在我的下拉指令中，我有：

import {Directive, HostBinding, HostListener} from '@angular/core';

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {

  @HostBinding('class.open') get opened() {
    return this.isOpen;
  }
  @HostListener('click') open() {
    this.isOpen = (this.isOpen === true ? false : true);
  }

  private isOpen = false;

}

這基本上會在單擊時跟蹤元素是真還是假，並且每次單擊都會在true和false之間切換。 如果為true，則會將.open css類添加到元素中。

創建指令后，我將其導入到我的導航組件中：

import { DropdownDirective } from "./dropdown.directive";

接下來，我將自定義下拉指令附加到我的元素：

<nav>
<ul>
  <li>
    <span appDropdown>
      List Item 1
    </span>
    <ul class="sub-menu">
      <li><a href="#">New</a></li>
      <li><a href="#">Edit</a></li>
      <li><a href="#">Remove</a></li>
    </ul>
  </li>
  <li>
    <span appDropdown>
      List Item 2
    </span>
    <ul class="sub-menu">
      <li><a href="#">New</a></li>
      <li><a href="#">Edit</a></li>
      <li><a href="#">Remove</a></li>
    </ul>
  </li>
 </ul>
 </nav>

最后我用css做了實際的下拉動畫，最初通過隱藏子菜單<ul>使其height: 0; 和opacity: 0; 然后當.open類添加到span元素時，我只是將子菜單樣式更改為opacity: 1; 和height: 100%;

.sub-menu{
   opacity: 0;
   overflow: hidden;
   height: 0;
}

.open + ul.sub-menu {
    opacity: 1;
    height: 100%;
}

Answer 2

你能把參數傳遞給toggleSubMenu（）嗎？ 例如：

<span (click)="toggleSubMenu(1)">
  List Item 1
</span>