CSS：隐藏另一个元素时隐藏一个元素答案

【问题标题】：CSS: Hide an element when another element is hiddenCSS：隐藏另一个元素时隐藏一个元素
【发布时间】：2023-03-22 18:11:01
【问题描述】：

我有以下问题：

我已经有一个代码，当它具有特定值时隐藏 类元素 1（并非所有网站都相同）。

现在我还想隐藏 class element 2 仅当 class element 1 已经隐藏时。

你们对如何做到这一点有任何想法吗？

谢谢！

【问题讨论】：

这个问题的问题是代码对我们来说是隐藏的。请添加相关代码 sn-p 以便我们为您提供帮助

标签： css hide element

【解决方案1】：

如果你想隐藏一个元素和它旁边的元素，你应该使用“+”选择器。

.hiderClass,
.hiderClass + .element {
  display: none;
}

【讨论】：

你将如何在这行代码中做到这一点？ .wc_review_badge_inner[data-count="0"]{display:none !important;} （如果值为0，这是隐藏的元素） .wc_review_section （这是隐藏第一个元素时应该隐藏的元素，但只有那时）
试试这个：.wc_review_badge_inner[data-count="0"], .wc_review_badge_inner[data-count="0"] + .wc_review_section { display:none !important; } 我给你做了一个演示。这是：jsfiddle.net/4zL7dsah

【解决方案2】：

可能的解决方案是添加一个类，该类将隐藏它自己的元素和下一个元素。当您将“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>

【讨论】：

但这意味着它总是会隐藏我的父元素，不是吗？如果第一个元素被隐藏，我只想隐藏第二个元素，但情况并非总是如此
不！ .parent.hideElement3 .element3 {display:none;} 意味着隐藏具有“parent”和“hideElement3”类的元素内的所有具有类“element3”的元素有关css选择器的更多信息，请访问CSS Selector Reference并使用CSS Selector Tester

【解决方案3】：

确保您的 CSS 样式显示为 display: none，然后使用 element.classList.add('cssclass') 或 remove 或 toggle。

切换是最好的，因为如果它看到类在，它会分别删除或添加。

希望对您有所帮助。

【讨论】：