javascript - 如何防止(单击)将该类添加到 ngFor 中的所有元素？

Question

我有一个使用 ngFor 动态构建的移动导航。在该导航中，某些项目会有下拉菜单。在桌面上，这是通过悬停来处理的。但是在移动设备上我创建了一个点击事件。使用 a:active 不是我的用户体验团队的选择。我们希望用户单击导航项并能够打开和关闭下拉列表。我遇到的问题是 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>

这是我正在调用的方法。这里没什么特别的

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

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

}

Answer 1

您可以稍微更改一下 HTML，为您的案例创建单独的 HTML，然后移动 (click)来自<li>到相应的元素。

示例(HTML 结构已更改，因此 CSS 也可能需要更改):

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