代码之家 › 专栏 › 技术社区 › bluePearl

默认情况下展开第一个菜单项和颜色背景

angular css html javascript

bluePearl · 技术社区 · 6 年前

我有一个侧菜单,其中显示for循环的菜单标题。我想:

页面加载时展开的第一个菜单项
要突出显示的展开项(与悬停时的背景相同)
一次只允许展开一个菜单项。展开菜单标题时-确保折叠上一个展开的标题。

我使用锚标记中的“aria expanded”作为我功能的一个条件,但是我没有得到预期的一致结果。

这是我的HTML:

<div *ngFor="let item of items; let currIndex = index">
    <header>
       <a data-toggle="collapse" aria-expanded="false" [attr.aria-controls]="item.id" [attr.data-target]="'#'+item.id" (click)="toggleHeader(item.id, $event, currIndex)">
         <span>{{item.name}}</span>
         <span *ngIf="item.isActive" [ngClass]="ariaExpanded ?'chevronDown':'chevronUp'"></span>
       </a>
    </header>

    <ul *ngIf="item.isActive" class="collapse" [id]="item.id" data-toggle="buttons">
       <li>....</li>
       <li>....</li>
    </ul>
</div>

这是我的typescript组件:

public ariaExpanded: boolean;
public currentIndex: number;

public toggleHeader(id: number, event: any, currIndex: number){
   let header = this.arrayOfItemsData.filter((item)=> item.id === id)[0];
   if(header){
      header.isCollapsed = !header.isCollapsed;
   }
   this.currentIndex = currIndex;
   this.ariaExpanded = event.currentTarget.attributes["aria-expanded"];
}

以下是演示的链接: https://stackblitz.com/edit/angular-uihbx6
不知道为什么在本演示中单击时不切换列表。