Tengo un menú desplegable. En algunas páginas, el enlace simplemente se desplaza al ancla en lugar de actualizar la página. Cuando esto sucede, se supone que el menú desplegable se cierra. Pero no es así.

este es mi html

 <div class="navbar"> <div class="nav_item"> <div class="dropdown menu_item" > <span class="navbar-submenu"> <a href="/">dropdown</a></span> <div class="secondarynav" > <div class="nav_item"> <div class="menu_item" > <a href="/#">link</a> </div> </div> <div class="nav_item"> <div class="menu_item" > <a href="/#">link</a> </div> </div> </div> </div> </div> <div class="nav_item"> <div class="menu_item" > <a href="/">link</a> </div> </div> </div>

Lo que se supone que sucede es que cuando un visitante hace clic en el menú desplegable, la clase activa se agrega al nav_item principal, que luego muestra el resto del menú. Cuando un usuario vuelve a hacer clic en el menú desplegable, se elimina el activo y se cierra el menú desplegable.

 $('.dropdown').click(function (e) { $(this).closest('.nav_item').toggleClass('active'); });

Ahora el problema, cuando un visitante hace clic en el menú desplegable, entonces cualquiera de los enlaces secundarios me gustaría que se elimine la clase activa, lo que actualmente solo ocurre cuando se hace clic en el enlace desplegable.

He probado varios otros métodos

 $('.nav_item.active > *').click(function(e) { $(this).closest('.active').removeClass('active'); });

Pero esto falla con la función de alternar en el otro scipt. Básicamente, el activo se agrega y luego se elimina de inmediato.

¿Cómo puedo configurarlo para que cuando se haga clic en .dropdown .active se agregue al nav_item principal? Pero luego, si se hace clic en cualquier enlace en ese menú, ¿se elimina el .active? Gracias