轉換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>