Javascript 如何防止（单击）将类添加到ngFor中的所有元素？

我有一个移动导航，它是用ngFor动态构建的。在该导航中，某些项目将具有下拉列表。在桌面上，这是通过悬停来处理的。然而，在手机上，我创建了一个点击事件。使用：active不是我的UX团队的选项。我们希望用户单击导航项，并能够打开和关闭下拉列表。我遇到的问题是，ngFor将单击永久导航项，而不仅仅是带有下拉菜单的项，当您单击它时，它会使用下拉菜单将类添加到所有元素中，以便打开所有下拉菜单，而不仅仅是您单击的子项

这是我的html

<div id="mobNav" [ngClass]="{'toggleNav': isClassVisible}">
                            <ul class="navList">
                                <li class="root" *ngFor='let item of topMenu' (click)="toggleClass()" [ngClass]="{'more' : !item.url}">
                                    <a class="txt">{{item.name}}</a>
                                    <!--Mobile-->
                                    <ul *ngIf="!item.url" class="dropDown" [ngClass]="{'toggleMobileNav' : isMobileVisible}">
                                        <li *ngFor="let sItem of findChildren(item.tabID) " class="txt ">
                                            <a href="{{ sItem.url }} ">{{ sItem.name }}</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

---

}您可以稍微更改HTML，为您的案例创建单独的HTML，然后将

（单击）

从

移动到相应的元素

示例（HTML结构已更改，因此CSS可能也需要更改）：

---

非常感谢你。很有魅力

  toggleClass(){
this.isMobileVisible = !this.isMobileVisible;
if(this.isMobileVisible === true){
  console.log("class added");

}      else{
    console.log("class not added");
  }

<div id="mobNav" [ngClass]="{'toggleNav': isClassVisible}">
    <ul class="navList">
        <li class="root" *ngFor='let item of topMenu' [ngClass]="{'more' : !item.url}">
            <a *ngIf="item.url">
                <span class="txt">{{item.name}}</span>
            </a>
            <a *ngIf="!item.url" (click)="toggleClass(item)">
                <span class="txt">{{item.name}}</span>
                <!--Mobile-->
                <ul class="dropDown" [ngClass]="{'toggleMobileNav' : item.isMobileVisible}">
                    <li *ngFor="let sItem of findChildren(item.tabID) " class="txt ">
                        <a href="{{ sItem.url }} ">{{ sItem.name }}</a>
                    </li>
                </ul>
            </a>
        </li>
    </ul>
</div>

toggleClass(item){
    item.isMobileVisible = !item.isMobileVisible;
    if(item.isMobileVisible === true){
        console.log("class added", item);

    }      else{
        console.log("class not added", item);
    }
}