Как реализовать такую логику?

98
28 марта 2022, 23:30

Имеется три блока html:

HTML:
    <div class="test"> 
      <div class="hide"></div>
      <div class="hide"></div>
    </div>
CSS:
.hide {
display: none;
}

Как сделать при дописании к классу "text" (родительскому блоку) класса "active" (<div class="test active"> ) изменить селектор класса "hide" на display: block;

P.S Интересуют любые, известные вам варианты: SASS, Less, сам CSS, JS.

Answer 1

function addActive() { 
  document.querySelector('.test').classList.add('active'); 
} 
function removeActive() { 
  document.querySelector('.test').classList.remove('active'); 
}
.hide { 
  display: none; 
} 
 
.test.active .hide { 
  display: block; 
}
<button onclick="addActive()">Add active</button> 
<button onclick="removeActive()">Remove active</button> 
 
<div class="test"> 
  <div class="hide">AAA</div> 
  <div class="hide">BBB</div> 
</div>

Answer 2

CSS:

.test.hide {
  display: none;
}
.test.active .hide {
  display: block;
}

SCSS: 

.test{
    .hide {
       display: none;
    }
    &.active {
       .hide {
           display: block;
       }
    }
}
READ ALSO
JS не сортируется набор данных
javascript

JS не сортируется набор данных

Есть набор данных:

 87
Как доделать регулярное выражение для проверки значения на дробность?
javascript

Как доделать регулярное выражение для проверки значения на дробность?

Есть функция, которая проверяет значение на дробное

 105
Элемент массива на первое место переместить
javascript

Элемент массива на первое место переместить

есть массив сообщений

 107
Остановить setInterval() когда переменная 0
javascript

Остановить setInterval() когда переменная 0

Когда пользователю приходит новое сообщение, вывожу в title мигание, что новое сообщение как в вк

 166