Question

我让php生成了几个DIV标签，其中填充了数据库信息。 400像素的DIV高度将显示所有信息。但是，我使用CSS在页面上将DIV渲染为height = 50PX。

示例：

<div style="height: 50px">Info</div>
<div style="height: 50px">Info</div>
<div style="height: 50px">Info</div>
<div style="height: 50px">Info</div>

等

我需要一些有关javascript方法和函数的帮助，当我单击DIV元素时，这些函数将运行，该函数应将style.property.height更改为400px，同时将其他任何已从400px扩展到50px的div减小。当DIV动作时，即为400px时，无论单击多少次，都不应更改，但一旦单击DIV或另一个div，它应恢复为50px

Answer 1

您可以给所有div相同的类，以选择它们（使用document.querySelectorAll）来更改其样式。您可以使用div遍历所有Array.prototype.forEach，将其高度更改回50px。 JSFiddle：http://jsfiddle.net/s5dLpjkg/embedded/result

var divs = document.querySelectorAll(".myClass");
var input = document.getElementById("num");
document.getElementById("transitionBtn").addEventListener("click", function(e){
  var num = input.value;
  var div = divs[num-1];
  [].slice.call(divs).forEach(function(el){
    if(el.style.height!=="50px"&&el!==div){
      el.style.height = "50px";
    }
  });
  div.style.height="200px";
});

.myClass{
  background-color: dodgerblue;
  border: 1px solid black;
  transition: height 2s;
}

<div style="height: 50px" class="myClass">Info #1</div>
<div style="height: 50px" class="myClass">Info #2</div>
<div style="height: 50px" class="myClass">Info #3</div>
<div style="height: 50px" class="myClass">Info #4</div>
<input type="number" id="num" placeholder="Div number" min="1" max="4" style="width: 30%" value="1">
<p/>
<button id="transitionBtn">Run Transition</button>

转换DIV元素，同时还原另一个元素上的过渡-使用Javascript

1 个答案: