如何防止(单击)将该类添加到ngFor中的所有元素?
问题描述:
我有一个用ngFor动态构建的移动导航。在那个导航栏中,一些项目会有下降。在桌面上,这是通过悬停进行处理的。但是在手机上,我创建了一个点击事件。使用a:active不是我的用户体验团队的一个选择。我们希望用户点击导航项并能够打开和关闭下拉菜单。我遇到的问题是ngFor将点击导航项目,而不仅仅是具有下拉菜单项目的点击,当您点击它时,它会将该类别添加到所有元素中,从而打开所有下拉菜单,而不仅仅是你点击的那个孩子。如何防止(单击)将该类添加到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");
}
}
答
可以改变了一下HTML,为您的情况下创建单独的HTML,然后从<li>
移动(click)
到相应的元素。
样品(HTML结构也因此发生变化也CSS可能需要更改):
toggleClass(item){
item.isMobileVisible = !item.isMobileVisible;
if(item.isMobileVisible === true){
console.log("class added", item);
} else{
console.log("class not added", item);
}
}
谢谢:
您也可以以与每个单独的项目工作转变职能非常。奇迹般有效 – FoffySkrimshaw