I have a toggle menu

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

And I apply css if it is opened

Where menu:

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

This works, so If I click on menu it is opened and I change the icon , and if I click another time the menu is closed and the icon returns as at the beginning.

My problem is if I click on the menu, it change the icon, but If I don't click another time in the menu but in another page, the icon remains equals.

So for example

MENU: with Icon1

I click on menu Icon1->Icon2. I close menu Icon2->Icon1

I click on menu Icon1->Icon2 If I click in another part (for example in another page) the menu is closed but Icon is Icon2