CSS: скрыть элемент, когда другой элемент скрыт - PullRequest
Новая
       7

CSS: скрыть элемент, когда другой элемент скрыт

0 голосов
/ 02 октября 2018

У меня есть следующие вопросы:

У меня уже есть код, который скрывает элемент класса 1 , когда он имеет определенное значение (которое не одинаково на всех сайтах).

Теперь я также хочу скрыть элемент класса 2 ТОЛЬКО ЕСЛИ элемент класса 1 уже скрыт.

У вас, ребята, есть идеи, как это сделать?это?

Спасибо!

Ответы [ 3 ]

0 голосов
/ 02 октября 2018

если вы хотите скрыть элемент и элемент рядом с ним, вы должны использовать селектор "+". 

.hiderClass,
.hiderClass + .element {
  display: none;
}
0 голосов
/ 03 октября 2018

Убедитесь, что у вас есть стиль CSS, который говорит display: none, а затем используйте element.classList.add('cssclass') или remove или toggle.

Переключение является лучшим, потому что, если он видит, что класс входит, он будетудалить или добавить соответственно.

Надеюсь, что поможет.

0 голосов
/ 02 октября 2018

Возможное решение - добавить класс, который будет скрывать сам элемент и следующий элемент.когда вы добавляете класс «hideElement1» в родительский класс, вы скрываете element1 и element2 и т. д., я рекомендую это решение, только если у вас небольшое количество элементов, в противном случае вам следует использовать JavaScript. 

<div class="parent">
    <div class="element1">element1</div>
    <div class="element2">element2</div>
    <div class="element3">element3</div>
    <div class="element4">element4</div>
</div>

<label for="tbx">insert number</label>
<input type="number" id="tbx" name="tbx" value="" />
<input type="button" id="btn" name="btn" value="click to hide" />

<style>
    .parent.hideElement1 .element1, .parent.hideElement1 .element2 {
        display: none;
    }

    .parent.hideElement2 .element2, .parent.hideElement2 .element3 {
        display: none;
    }

    .parent.hideElement3 .element3, .parent.hideElement3 .element4 {
        display: none;
    }
</style>

<script>

    var btn = document.getElementById('btn');
    var tbx = document.getElementById('tbx');
    btn.addEventListener('click', function () {
        hideElementbyIndex(tbx.value);
    });

    function hideElementbyIndex(elementIndex) {
        var elementClassNamePrefix = 'element';

        var elementsToHide = document.getElementsByClassName(elementClassNamePrefix + elementIndex);
        hideAll(elementsToHide);
        elementIndex++;
        var nextElementsToHide = document.getElementsByClassName(elementClassNamePrefix + elementIndex);
        hideAll(nextElementsToHide);
    }

    function hideAll(elements) {
        for (var i = 0; i < elements.length; i++) {
            elements[0].style.display = 'none';
        }
    }


</script>
...