Tengo un menú de alternar

 <button class="menu" onclick="menu(this),this.classList.toggle('opened');this.setAttribute('aria-expanded', this.classList.contains('opened'))">

Y aplico css si esta abierto

Dónde menú:

 function menu(event) { if($(event).hasClass('active')) { $(event).removeClass('active'); } else { $(event).addClass('active'); } }

Esto funciona, así que si hago clic en el menú, se abre y cambio el icono, y si hago clic otra vez, el menú se cierra y el icono vuelve como al principio.

Mi problema es que si hago clic en el menú, cambia el ícono, pero si no hago clic otra vez en el menú sino en otra página, el ícono permanece igual.

Así por ejemplo

MENÚ: con Icon1

Hago clic en el menú Icon1->Icon2. Cierro el menú Icon2->Icon1

Hago clic en el menú Icon1->Icon2 Si hago clic en otra parte (por ejemplo, en otra página), el menú se cierra pero Icon es Icon2