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

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的div减小为50px。 当DIV为动作时，即为400px时，无论单击多少次，都不应更改，但一旦单击DIV或另一个div，它应恢复为50px

Answer 1

您可以给所有div相同的类，以选择它们（通过document.querySelectorAll ）以更改其样式。 您可以使用Array.prototype.forEach遍历所有div将其高度更改回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>