Tengo este menú con diferentes submenús que son solo <ul> . Al hacer clic en un submenú, la clase .active se alternará y se mostrará el submenú. Sin embargo, cuando hago clic en un submenú diferente, el comportamiento deseado es que la clase .active se elimine del submenú anterior y se aplique al nuevo. Sin embargo, lo que obviamente sucede ahora es que el nuevo submenú también obtendrá la clase .active y ambos menús estarán abiertos al mismo tiempo, lo cual no es lo que busco.

¿Cuál sería una forma sencilla de asegurarse de que la clase .active se elimine cuando haga clic en el siguiente elemento del menú?

Este es mi código actual

 $(".menu nav ul li > ul.subnav li").on("click", function (_event) { $(this).children("ul.subnav").toggleClass("active"); });