Родительский div получает active, дочерний элемент должен поменять стиль и класс

Рейтинг: 0Ответов: 1Опубликовано: 10.01.2023

Имеется компонент боковой менюшки. Суть в том что подкатегории скрыты, если не кликнуть по стрелочки списка. А хотелось бы чтобы список раскрывался при клике на категорию.

По сути нужно чтобы при получении родителя класса active, класс и стиль дочернего менялся.

Было:

<div class="ba-blog-post">
<div class="ba-blog-post-content ba-categories-collapsed ba-categories-icon-rotated" style="--categories-collapse-height: 0;"><div/>
<div/>
<div class="ba-blog-post">...
<div class="ba-blog-post">...

Стало:

<div class="ba-blog-post active">
<div class="ba-blog-post-content" style="--categories-collapse-height:auto;"><div/>
<div/>
<div class="ba-blog-post">...
<div class="ba-blog-post">...

Страница с компонентом: https://decorstroy32.ru/catalog менюшка слева.

css javascript
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Такие вещи можно спокойно выносить в CSS и JS-ом просто менять класс:

const activateCheckbox = document.querySelector('#activate');
const parent = document.querySelector('.parent');

activateCheckbox.addEventListener('change', (e) => {
  const methodName = activateCheckbox.checked ? 'add' : 'remove';
  
  parent.classList[methodName]('active');
})
:root {
  --parent-color: red;
  --child-color: green;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: var(--parent-color);
}

.child {
  width: 50%;
  height: 50%;
  background-color: var(--child-color);
}

.parent.active {
  --child-color: blue;
}
<label>
  Activate
  <input id="activate" type="checkbox">
</label>

<div class="parent">
  <div class="child"></div>
</div>