Encontré un problema, ¿cómo hago eso cuando el usuario hace clic en uno de los menús desplegables en el móvil, cerrará el menú desplegable anterior y abrirá el menú en el que se hizo clic? Luego, cuando el usuario haga clic en un menú dentro del menú desplegable, ¿cerrará todos los menús desplegables, incluido el menú de alternar?

Aquí está el código que tengo

 ngOnInit(): void { if ($(window).width() < 991.98) { document.querySelectorAll('.nav-item').forEach(function(element){ element.addEventListener('click', function (this: any, e) { let nextEl = this.nextElementSibling; if(nextEl && nextEl.classList.contains('dropdown-menu')) { e.preventDefault(); if(nextEl.style.display == 'block'){ nextEl.style.display = 'none'; nextEl.style.opacity = '0'; nextEl.style.position = 'relative'; $(this).closest('li').removeClass('active'); } else { nextEl.style.display = 'block'; nextEl.style.opacity = '1'; nextEl.style.position = 'relative'; $(this).closest('li').addClass('active'); } } }); }) } } collapse() { this.showMenu = !this.showMenu; var toggle; if (this.showMenu == true) { toggle = this.elRef.nativeElement.querySelector('.toggle-menu'); toggle.classList.add('active'); $('.header-area .nav').slideToggle(200); } else { toggle = this.elRef.nativeElement.querySelector('.toggle-menu'); toggle.classList.remove('active'); $('.header-area .nav').slideToggle(200); } }

índice.html

 <ul class="nav"> <li> <a class="nav-item">Home</a> <div class="dropdown-menu"> <a routerLink="/home" class="dropdown-item">Home</a> <a routerLink="/dashboard" class="dropdown-item">Dashboard</a> <a routerLink="/setting" class="dropdown-item">Setting</a> </div> </li> <li> <a class="nav-item">Explore</a> <div class="dropdown-menu"> <a routerLink="/user" class="dropdown-item">User</a> <a routerLink="/admin" class="dropdown-item">Admin</a> </div> </li> </ul> <a class="toggle-menu" (click)="collapse()"> <span>Menu</span> </a>