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;然后{{1} }}类被添加到span元素中，我只是将子菜单样式更改为.open和opacity: 1;

height: 100%;

Answer 2

你能将参数传递给toggleSubMenu（）吗？ e.g：

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

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

2 个答案: