Question

如果要加载另一个div类，我想显示div。仅在加载nanobar类时显示selected，否则nanobar将被隐藏

css代码示例：

.nanobar {
  height: 75px;
  width: 100%;
  background: #fef9c7;
  border:1px solid #fce181;
  color:#333;
  padding:10px;
  margin-bottom:10px;
  font-size: 1.2rem;
  display:none;
}

HTML代码示例：

<div class="nanobar">
<span>Content</span>
</div>
<div id="category_container" class="content-padding {if $category} selected{/if}"> </div>

在这方面的任何帮助将不胜感激。

Answer 1

首先检查是否可以找到所选的班级

var selected = document.getElementsByClassName("selected");

然后检查此变量是否包含一个以上的元素。

if (selected.length < 1) {

// Hide your nanobar

} else {
// Show it
}

这不是完整的解决方案，如果仍有问题，请在评论中提问。

Answer 2

代码检查第二个div是否具有selected类。如果是这样，将显示第一个div，否则第一个div保持隐藏状态。

let divElements = document.querySelectorAll('div');

if (divElements[1].classList.contains("selected")) {
  divElements[0].classList.replace("hide", "show");
} else {
  divElements[0].classList.replace("show", "hide");
}

.nanobar {
  height: 75px;
  width: 100%;
  background: #fef9c7;
  border:1px solid #fce181;
  color:#333;
  padding:10px;
  margin-bottom:10px;
  font-size: 1.2rem;
}

.hide {
  display: none;
}
  
.show {
  display: block;
}

<div class="nanobar hide">
  <p>Hello</p>
</div>
<div class="apple jason selected hide">
  <p>Jason</p>
</div>

注意：从nanobar类中删除了display属性，并将其设置为自己的类。使其更易于隐藏和显示元素，并能够将其重用于其他元素。

您可以了解有关classList here

的更多信息

如果元素类已加载，则显示“隐藏Div”

2 个答案: