使用 Angular 2 动画创建手风琴导航答案

【问题标题】：Using Angular 2 animations to create accordion navigation使用 Angular 2 动画创建手风琴导航
【发布时间】：2017-04-01 13:10:26
【问题描述】：

我正在尝试在 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()方法判断点击了哪个菜单项，然后展开对应的子菜单？还是我必须为每个父菜单项分别创建一个切换方法？

谢谢

【问题讨论】：

标签： html css angular typescript menu

【解决方案1】：

你能传递一个参数给 toggleSubMenu() 吗？例如：

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

【讨论】：

【解决方案2】：

如果不为每个列表项创建一个方法，我实际上无法使用动画来解决这个问题，因此我采取了不同的路线并决定为下拉效果创建一个自定义指令。在我的下拉指令中，我有：

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 时，它会将.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%;
}

【讨论】：