javascript - 显示或隐藏元素会影响下方 div 的位置

Question

在下面的示例中，单击“单击我”div 会切换“信息”div 的显示。

显示或隐藏“信息”div 会向下/向上移动较低的 div(在我的示例中为 3 和 4)。

是否可以移动上面的 div(1 和 2)并保持下面的 div 在它们的位置？

function clickMe() {
  var infoDiv = document.getElementById("info");
  if (infoDiv.style.display === "none") {
    infoDiv.style.display = "block";
  } else {
    infoDiv.style.display = "none";
  }
}

.upper {
  border: 1px solid red;
}
#info {
  font-size: 11px;
}
.lower {
  border: 1px solid green;
}

<div class="upper">1</div>
<div class="upper">2</div>
<div onclick="clickMe()">Click me</div>
<div id="info">info</div>
<div class="lower">3</div>
<div class="lower">4</div>

Answer 1

切换可见性或不透明度实际上不会产生上两行移动而不是下两行的效果它会在原来信息所在的位置留下一条难看的白线。

所以我们通过在行前面添加等于信息高度的空白空间来伪造这种效果，这样我们就可以通过更改该间距行的高度来“插入”上面的行。

同样可以用 margin-top 和其他 CSS 方式来完成，但这是最容易解释的方式。 :)

function clickMe() {
  var infoDiv = document.getElementById("info");
  var spacer = document.getElementById("spacer");
  if (infoDiv.style.display === "block") {
    infoDiv.style.display = "none";
    spacer.style.height = "16px";
  } else {
    infoDiv.style.display = "block";
    spacer.style.height = "0px";
  }
}

.upper {
  border: 1px solid red;
}
#info {
  font-size: 11px;
  height: 16px;
  display: none;
}
#spacer {
  height: 16px;
}
.lower {
  border: 1px solid green;
}

<div id="spacer"></div>
<div class="upper">1</div>
<div class="upper">2</div>
<div onclick="clickMe()">Click me</div>
<div id="info">info</div>
<div class="lower">3</div>
<div class="lower">4</div>