Question

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

显示或隐藏“ info” div会上下移动较低的div（在我的示例中为3和4）。

是否可以改为移动较高的div（1和2）并将较低的div保持在原来的位置？

#include 'json2.min.js'

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;
}

Answer 1

您可以切换可见性而不是显示，如Paulie_D所指出：

function clickMe() {
  var infoDiv = document.getElementById("info");
  if (infoDiv.style.visibility === "hidden") {
    infoDiv.style.visibility = "visible";
  } else {
    infoDiv.style.visibility = "hidden";
  }
}

.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>

您也可以更改不透明度：

function clickMe() {
  var infoDiv = document.getElementById("info");
  if (infoDiv.style.opacity === "0") {
    infoDiv.style.opacity = "1";
  } else {
    infoDiv.style.opacity = "0";
  }
}

.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>

编写函数的更简洁的方法是使用匿名函数，解构和三元语句：

const clickMe = ({ style:s }) => s.visibility = s.visibility === "hidden" ? "visible" : "hidden"

.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(document.getElementById('info'))">Click me</div>
<div id="info">info</div>
<div class="lower">3</div>
<div class="lower">4</div>

Answer 2

请勿切换display-切换visibility。

可见性CSS属性显示或隐藏元素，而无需更改文档的布局。

MDN

function clickMe() {
  var infoDiv = document.getElementById("info");
  if (infoDiv.style.visibility === "hidden") {
    infoDiv.style.visibility = "visible";
  } else {
    infoDiv.style.visibility = "hidden";
  }
}

.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 3

我真的想向上移动项目而不是仅切换可见性，而是需要用容器包装内容。并使用flex将所有项目粘贴到底部。但是容器必须具有固定的高度：

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;
}

.wrapper {
  display: flex;
  height: 150px;
  flex-direction: column;
  justify-content: flex-end;
}

<div class="wrapper">
    <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>
 </div>

Answer 4

切换可见性或不透明度实际上不会产生上两行移动而不是下两行移动的效果并留下了一条丑陋的白线，原来的信息就在这里。

因此，我们通过在行前添加等于信息高度的空白空间来伪造该效果，因此我们可以通过更改装订线行的高度来“向上推”上部行。

可以使用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>

显示或隐藏元素会影响较低div的位置

4 个答案: