Question

在CSS中，我有班级＆＃39; current-cat-parent＆＃39;和班级＆＃39;隐藏它＆＃39;。一个位于页面顶部，第二个位于页面中间。
现在的问题是，我想让它出现“隐藏它”。课程的内容仅限于班级当前 - 猫 - 父母＆＃39;存在于页面的某个位置，否则隐藏该内容请让我知道如何才能实现谢谢

Answer 1

var parent = document.querySelectorAll('.current-cat-parent');
if(parent.length == 0){
  document.querySelector('.hide-it').style.display = none; 
}

Answer 2

Amir回答的问题是页面上存在的div的长度是1而不是0。 none也应为"none"

见下文

var parent = document.querySelectorAll('.current-cat-parent');
console.log(parent.length)

if (parent.length === 1) { // or > 0

  document.querySelector('.hide-it').style.display = "none";
}

.current-cat-parent {
  height: 100px;
  width: 100px;
  background: Red;
}

.hide-it {
  height: 100px;
  width: 100px;
  background: blue;
}

<div class="current-cat-parent">

</div>

<div class="hide-it">

</div>

Answer 3

你也可以通过css。

来做

.current-cat-parent .hideit {display：none; }

当页面没有current-cat-parent类

时，此代码有效

.hideit{     display:block;  }

Answer 4

如果您的两个HTML元素都是兄弟选择器，例如，如果您有以下内容：

<div class="current-cat-parent">

</div>

---- other contents -----

<div class="hide-it">

</div>

然后您只需使用CSS即可实现。试试这个：

.hide-it {
  display: none;
}
.current-cat-parent ~ .hide-it {
  display: block;
}

如果页面上不存在第二类，则隐藏第一类

4 个答案: