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

我正在嘗試在 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() 方法來判斷哪個菜單項被點擊，然後展開對應的子菜單？還是我必須為每個父菜單項分別創建一個切換方法？

謝謝

答案＃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 和 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%;
}

答案＃2

你可以傳遞一個參數給 toggleSubMenu() 嗎？例如：

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