Question

我正在使用Angular 7并创建一个手风琴导航菜单。

在一个H2的点击它调用的 navSelect（项目，$事件）在nav.component.ts方法。

在这种方法中，我希望它： 1.）在所有H2上使用“ .acc_trigger”类删除“ opened”类。 2.）将“ opened”类添加到调用该方法的H2中。

如果您在下面查看navSelect（）方法，您会注意到我所拥有的。我有点接近，但还不是全部。我无法获取所有的“ h2.acc_trigger”来删除“已打开”类...

***编辑 - 。下面的代码现在工作良好

nav.component.html

<nav id="main-menu" *ngIf="nav">
<ng-container *ngFor="let item of nav.Navigation.MenuItem; let r = index">
    <h2 class="acc_trigger" (click)="navSelect(item, $event)" >{{item.Text}}</h2>
    <ng-container *ngIf="item.MenuItem != null">
        <div class="acc_container" >
            <ul class="ulNav">
                <li *ngFor="let nav of item.MenuItem"><a href="">{{nav.Text}}</a></li>
            </ul>
        </div>
    </ng-container>
</ng-container>

nav.component.ts

navSelect(item: any, e: any,) {

  var h2e = (e.target as Element);

    if(this.lastH2Selected != undefined) {
        var lastH2Sibling = (this.lastH2Selected as Element).nextElementSibling;
        if(lastH2Sibling != null) {
            lastH2Sibling.classList.remove("opened");
        }
    }

    if(h2e.nextElementSibling != null) {
        h2e.nextElementSibling.classList.add('opened');
    }

    //store off
    this.lastH2Selected = h2e;

}

nav.component.css

div.acc_container {
  max-height: 0px;
  overflow-y: hidden;
  transition: ease-out 300ms max-height;
}

div.acc_container.opened {
  max-height: 500px;
  transition: ease-in 600ms max-height;
}

Angular 7-创建手风琴菜单

0 个答案: