Как добавить класс одному элементу если у другого висит определенный класс?

Question

[crazyestomel]

Как добавить класс одному элементу если у другого висит определенный класс?

Всем привет, есть у меня раздвижное меню и внутри этого меню, при наведении на него появляется кнопка его разворачивания и висит пока меню открыто, если закрыть то кнопка исчезнет.

Внутри меню есть пункты которые я могу выбрать чтобы они стали активными, так вот если я выбираю пункт а потом перезагружаю страницу то раздвижное меню закрывается а кнопка открытия меню скрывается, opacity: 0; но выбранный пункт так и остаётся выбранным с висящем на нем активным классом.

И когда меню закрыто можно легко забыть в каком именно ты выбирал пункты чтобы их снять.

Я хочу чтобы когда Внутри меню есть хоть 1 активный элемент то кнопка раскрытия меню была всегда opacity: 1;

Это будет своеобразным индикатором чтобы человек понимал что вот в этом закрытом меню есть активный элемент потому что висит кнопка его открытия а у всех остальных кнопка opacity: 0;

Меню открыто и есть выбранный пункт, кнопка висит:

Меню закрыто НО пункт по прежнему выбран, а вот в каком меню можно и забыть

Хочу добавить кнопке класс если внутри выбран пункт

Answer 1

[alaskafx]

Как насчёт отслеживания клика по этим элементам и соответствующего добавления класса ?
Пример: клик

Comments

[crazyestomel]

Нужно чтобы это работало даже после перезагрузки страницы.

Ну либо переделать скрипт моего меню чтобы оно просто не закрывалось само, даже если перезагрузить страницу или закрыть вкладку и опять вернуться оно должно быть открыто как и до перезагрузки страницы.

чтобы только по нажатию закрывалось но я в этом не понимаю, вот код моего меню

var panelItem = document.querySelectorAll('.panel-title'),
  active = document.getElementsByClassName('panel-active');

Array.from(panelItem).forEach(function(item, i, panelItem) {
  item.addEventListener('click', function(e) {

    // изменить состояние класса panel-active на текущем элементе: добавить если не было, убрать если было.
    this.classList.toggle('panel-active');
  });
});

[alaskafx]

crazyestomel, Тогда можете задать кастомную дату в атрибуты элементов из списка, на подобии:

<ul>
<li data='prize'>Призы</li>
</ul>

Далее сохраняя активный атрибут элемента в хранилище, а при загрузке страницы его доставать, раскрывая нужный элемент

[crazyestomel]

alaskafx, я понял задумку но я в коде вообще не понимаю, этот скрипт меню я просто нашел в интернете, понял что не хватает функции запоминания открытого меню а как сделать я не знаю