Как добавить класс внешнему блоку только тогда когда элемент списка имеет класc active?

Question

[SamFlin]

В списке при клике на li переключается класс active. Как сделать чтоб активные li вешали класс каждый на свой внешний блок и убирали когда становятся неактивными.

Comments

[Антон Литвиненко]

типа както так

$('li').on('click', function (e){
	$(this).toggleClass('active').parents('.нужный_родитель').toggleClass('active');
});

Answer 1

[kirsafonov]

let activeParentNode
Сюда будем записывать, какой контейнер активный
Дальше обработчик клика приводит нас к li и сделаем следующее:

if ( !activeParentNode === li.parentNode ) {
  if (activeParentNode) activeParentNode.classList.remove('active')
  li.parentNode.classList.add('active')
  activeParentNode = li.parentNode
}

Comments

[SamFlin]

Большое спасибо за ваш код. Если вам будет интересно разобрать вот код который я понаписал.
Тут вешаю active при клике одному элементу списка и убираю предыдущему.
const container = document.querySelector('.blockLeft-menu__list')

container.addEventListener('click', function(e) {
const items = document.querySelectorAll('.blockLeft-menu__link')
const target = e.target
Array.from(items).forEach(item => {
item.classList.remove('active')
})
target.classList.add('active')
})
Тут через второй класс элемента списка('.blockLeft-menu__link1')
добавляю класс внешнему блоку.
Но при клике по другому элементу списка ('.blockLeft-menu__link') active переходит,
а на внешнем блоке active остаётся. Задача убрать active с внешнего блока если
элемент списка его повесивший сам не активен.

const link1 = document.querySelector('.blockLeft-menu__link1')

if (link1){
const johnathan = document.querySelector('.blockRight__johnathan');
link1.addEventListener("click", function (e) {

johnathan.classList.toggle('active');

});
}

const link2 = document.querySelector('.blockLeft-menu__link2');

if (link2){
const journal = document.querySelector('.blockRight__journal');
link2.addEventListener("click", function (e) {

journal.classList.toggle('active');

});
}