I am facing a challenge with my mobile navigation menu, which is dynamically created using ngFor. Some items in the nav have dropdowns that need to be opened and closed on click. Unlike desktop where hover can be used, I had to implement a click event for mobile. Unfortunately, using :active pseudo-class is not an option according to our UX team's guidelines. The goal is for users to click on a nav item and only open/close its corresponding dropdown. However, the issue arises from ngFor applying the click event to every nav item, not just those with dropdowns. As a result, clicking on one item opens all dropdowns.
Below is my HTML structure:
<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>
And here is the method being called. It simply toggles visibility:
toggleClass(){
this.isMobileVisible = !this.isMobileVisible;
if(this.isMobileVisible === true){
console.log("class added");
} else{
console.log("class not added");
}
}