[Bug?] Click menu-sub-accordion, and then click menu-item without sub, the previous menu-item without sub is still expanding and can not be collapsed by clicking it
This problem actually exists in the Angular Metronic demo as well (https://preview.keenthemes.com/metronic8/angular/demo1/builder). So I have a menu; some have submenus and some do not.
<ng-container *ngFor="let menu of menus">
<ng-container *ngIf="menu.childs && menu.childs.length">
<div data-kt-menu-permanent="true" data-kt-menu-static="true" class="menu-item menu-accordion"
data-kt-menu-trigger="click" routerLinkActive="here show">
<span class="menu-link">
<span class="menu-icon">
<span [inlineSVG]=""images/"+menu.icon " class="svg-icon svg-icon-2" [cacheSVG]="true"></span>
</span>
<span class="menu-title" [attr.data-link]="menu.accessLink">{{ menu.name }}</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion" routerLinkActive="menu-active-bg">
<div class="menu-item" *ngFor="let submenu of menu.childs">
<a class="menu-link without-sub" routerLinkActive="active" [routerLink]="[submenu.accessLink]">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">{{ submenu.name }}</span>
</a>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="menu.childs && menu.childs.length === 0">
<div class="menu-item" (click)="closeDropdown()">
<a class="menu-link without-sub" [routerLink]="[menu.accessLink]" routerLinkActive="active">
<span class="menu-icon">
<span [inlineSVG]=""images/"+menu.icon " class="svg-icon svg-icon-2" [cacheSVG]="true"></span>
</span>
<span class="menu-title">{{ menu.name }}</span></a>
</div>
</ng-container>
</ng-container>
</div>the problem is, first, I clicked the menu that has submenus, say menu X. So menu X will be expanded and showed its submenus, say x1,x2,x3. And then I clicked the submenu x3. After that, I clicked the menu Y which has no submenus. The menu X will still expand and when I tried to collapse it, it did not work. Is there any workaround?
Replies (9)
here is the html, it's broken in the post and I always got error when I tried to edit the post.
<ng-container *ngFor="let menu of menus">
<ng-container *ngIf="menu.childs && menu.childs.length">
<div data-kt-menu-permanent="true" data-kt-menu-static="true" class="menu-item menu-accordion"
data-kt-menu-trigger="click" routerLinkActive="here show">
<span class="menu-link">
<span class="menu-icon">
<span [inlineSVG]=""images/"+menu.icon " class="svg-icon svg-icon-2" [cacheSVG]="true"></span>
</span>
<span class="menu-title" [attr.data-link]="menu.accessLink">{{ menu.name }}</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion" routerLinkActive="menu-active-bg">
<div class="menu-item" *ngFor="let submenu of menu.childs">
<a class="menu-link without-sub" routerLinkActive="active" [routerLink]="[submenu.accessLink]">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">{{ submenu.name }}</span>
</a>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="menu.childs && menu.childs.length === 0">
<div class="menu-item" (click)="closeDropdown()">
<a class="menu-link without-sub" [routerLink]="[menu.accessLink]" routerLinkActive="active">
<span class="menu-icon">
<span [inlineSVG]=""images/"+menu.icon " class="svg-icon svg-icon-2" [cacheSVG]="true"></span>
</span>
<span class="menu-title">{{ menu.name }}</span></a>
</div>
</ng-container>
</ng-container>
</div>
Hi,
We will fix it. You can apply the following workaround:
In the file `demo1/src/app/_metronic/kt/components/MenuComponent.ts`, locate the following line of code:
const itemsToHide = this.element.querySelectorAll(".show[data-kt-menu-trigger]");Replace it with the following code:
const itemsToHide = this.element.querySelectorAll(".hover[data-kt-menu-trigger]");This change modifies the selector used to identify the menu items that need to be collapsed. By using the `.hover` class instead of `.show`, the menu item without a sub-menu will correctly collapse when clicked.
After making this change, save the file and rebuild your project. Test the menu functionality again, and you should find that the previous menu item without a sub-menu collapses as expected when clicking on a different menu item.
I hope this helps! Let me know if you have any further questions or issues.
thanks
I don't think it works. So, the problem I encounter is there is an expanded menu, after that I click the submenu of it, after that, I click the menu without submenu. The first menu is still expanded, its submenus are still showing, but I can not collapse it.
How to replicate in https://preview.keenthemes.com/metronic8/angular/demo1/builder:
1. expand pages->profile->and then click projects
2. click Layout Builder
3. the profile menu and its submenus are still showing, but I can not collapse it by clicking it.
Yes, we have tested the solution locally. Please replace the occurrences of `.show` with `.hover` in the specified file (`demo1/src/app/_metronic/kt/components/MenuComponent.ts`). This change should address the issue you described where the previous menu item without sub cannot be collapsed by clicking on it.
Please give it a try in your code and let us know if it resolves the problem for you as well.
I have done exactly what you said, and it does not work.
by any chance, is there a more correct solution, Sir?
The fix I mentioned above has been successfully included in the current development version, and it is working as expected. We are planning to release the updated version soon, so you can expect to have the fix available in the upcoming release.
Thank you for your patience.
I am sorry Sir, are we on the same page? Have you done the replication of the bug I mentioned above on https://preview.keenthemes.com/metronic8/angular/demo1/builder?
