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

问题描述：

我正尝试在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（）方法来确定哪个菜单项被点击，然后展开相应的子菜单？还是必须分别为每个父菜单项创建切换方法？

谢谢

答

我居然想不出它使用的动画，而无需创建每个列表项的方法，所以我采取了不同的路线，并决定创建下拉作用的自定义指令。在我的下拉指令中，我有：

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%; 
}

你能否提供一个工作的重击者？ –

答

你可以传递参数toggleSubMenu（）吗？例如： -

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

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

相关推荐