Question

我有一个侧面菜单，其中显示了来自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
不确定为什么在此演示中点击时不切换列表。

Answer 1

由于在单击按钮时循环播放，因此所有按钮均显示为活动状态。如果您想避免在数据示例中添加新属性，请添加点击。因此，您可以使用此变量进行切换，并且可以使用此值轻松显示活动状态。

如果您点击它，请立即检查实例，https://stackblitz.com/edit/angular-multi-toggle

默认情况下展开第一个菜单项并为背景设置颜色

1 个答案: