html - 使用 Angular 2 动画创建 Accordion 式导航

Question

我正在尝试在 Angular 2 中创建一个可折叠的 Accordion 菜单。目前我的代码允许子菜单使用 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;

}

这基本上会跟踪元素在点击时是真还是假，每次点击都会在真假之间切换。当为真时，它将添加 .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 class 添加到 span 元素，我只是将子菜单样式更改为 opacity: 1;和 height: 100%;

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

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