Question

如果没有孩子，我会看到关于隐藏父div的类似问题，但如果其中没有其他孩子，则无法找到如何在父母中显示不同的div。

我有一个使用免费会议室更新的父div：

.Parent{
    width: 100%;
    margin-top: 4px;
    overflow: auto;
}

如果有免费房间，它会显示在电路板上（在父母中）。这在JS中就像这样完成：

$('#Parent').addClass("showRooms");

如果某个房间默认不是免费的，则会隐藏：

if(roomStatus == "Taken"){
    $('#Parent').addClass("hideRooms");    
}

css类如下：

.showRooms{
    visibility: visible;
    background-color: green;
}
.hideRooms{
    visibility:hidden;
}

当隐藏所有房间时，有一个空白板，我想在父母中显示一个不同的子div，这样我就可以展示一些更有趣的东西，例如：公司徽标。

（我知道即使有房间显示我也可以在父母身上有compnay标识，但我只想要显示没有房间免费）

我可以用什么来实现这个目标？

Answer 1

是的！

我想出了一个纯CSS解决方案，因为组合选择器非常棒：

考虑以下设置：

.container {
  margin: 10px;
  border: 1px solid #000;
}

.room {
  width: 100px;
  height: 75px;
  background-color: #F00;
}

.hidden {
  display: none;
}

.placeholder {
  display: block;
}

.room:not(.hidden) ~ .placeholder {
  display: none;
}

<div class="container">
  <div class="room hidden"></div>
  <div class="room hidden"></div>
  <div class="room hidden"></div>
  <div class="room hidden"></div>
  <div class="placeholder">No rooms available!</div>
</div>
		
<div class="container">
  <div class="room hidden"></div>
  <div class="room"></div>
  <div class="room"></div>
  <div class="room hidden"></div>
  <div class="placeholder">No rooms available!</div>
</div>

现在魔术在于以下几行：

.room:not(.hidden) ~ .placeholder {
    display: none;
}

说明：

选一个占位符，它是不包含.hidden类的.room的兄弟。默认情况下占位符是可见的，但是如果它可以找到没有.hidden的.room的兄弟，它将回退到显示无。

请注意，这要求占位符div始终是其父级的最后子级。由于~选择器仅检查下一个兄弟，而不是之前的。

Answer 2

我会这样：

if(allRoomStatusAreTaken()){
  $('#Parent').addClass("showLogo");
} else {
  $('#Parent').removeClass("showLogo");
}

和

.showLogo{
  visibility: visible;
  background-image: url(...);
}

在allRoomStatusAreTaken()中，你必须检查是否所有房间都被带走了。我会使用Lodash中的every函数：

function allRoomStatusAreTaken() {
  return every(allRooms, room => room.status === "Taken");
}

Answer 3

您可以默认隐藏徽标，如果隐藏了房间，则使用js更改display。例如：

$(function() {

  var roomStatus = "Taken";

  if (roomStatus == "Taken") {
    $('#Parent').addClass("hideRooms");
    $('.logo').addClass('show');
  } 
})

.Parent {
  width: 100%;
  margin-top: 4px;
  overflow: auto;
}

.showRooms {
  visibility: visible;
  background-color: green;
}

.hideRooms {
  visibility: hidden;
}

.logo {
  display: none;
  width: 200px;
  height: 200px;
  background: red;
}

.logo.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Parent">
  <div class="logo">
    
  </div>
</div>

Answer 4

只需将徽标div保留在班级＆＃39; companyLogo＆＃39;在父级内部并使用以下CSS并将起作用。

.hideRooms .companyLogo{
visibility:visible;
}
.showRooms .companyLogo{
visibility:hidden;
}

如需更具体的答案，请提供HTML结构。

Answer 5

当父母有空时，你必须使用追加来向父母添加你想要的任何东西

if(roomStatus == "Taken"){
$('#Parent').addClass("hideRooms");    
$("#Parent").append("<span>somthing to show</span>");
}

Answer 6

你可以在一些div中包含一个徽标（或者其他任何东西，或者你可以在徽标图像上添加一个类，真的是任何东西），默认情况下会有一个隐藏的类，它会隐藏它然后你可以也表明你没有房间，如：

if(roomStatus == "Taken") {
    $('#Parent').addClass("hideRooms");
    $('.logo').addclass("visible");
    $('.logo').removeClass("hidden");
} else {
    $('#Parent').addClass("showRooms");
    $('.logo').removeClass("visible");
    $('.logo').addClass("hidden");
}

```

如果父div没有显示子项，则显示某个不同的子div

6 个答案:

是的！

说明：