单击按钮显示更多信息，然后单击它显示更少信息

Question

我正在为大学成绩创建一个网站，我制作了一个按钮，单击该按钮时会执行 JavaScript 函数以增加 HTML div 的高度，并且当按钮不再悬停在上方时，大小会减小。 但是，我想知道我是否以及如何做到这一点，如果我再次单击按钮，高度会变高，那么高度会变小。 我相信可以使用全局变量吗？ 但我对 JavaScript 不是最有信心。 我已经为我的脚本附上了下面的代码。 我没有任何错误，它按预期工作，为了方便和美观，我只想采用不同的方法来解决这个问题。

function showmoreinfo() {
    var x = document.getElementById("road");
    x.style.height = "600px";
    showlessinfo();
}

function showlessinfo() {
    var x = document.getElementById("road");
    x.style.height = "430px";
}

 <button onmouseout="showlessinfo()" onclick="showmoreinfo()" class="moreinfo"><i class="fa fa-arrow-down"></i></button>

仅供参考，430px 是我 div 的默认隐藏！

欢迎任何反馈！

Answer 1

当您想添加过渡动画时，最简单的方法是使用 css 来完成。 只需在单击时切换（添加/删除）一个类，然后用 css 完成其余的工作。

 function toggle() { var x = document.getElementById("road"); x.classList.toggle('active'); }

 #road { height: 430px; overflow: hidden; transition: height .4s ease-out; } #road.active { height: 600px; }

 <button onclick="toggle()" class="moreinfo"><i class="fa fa-arrow-down"></i></button> <div id="road"> Test<br>Test<br>Test<br>Test<br>Test<br>Test<br> Test<br>Test<br>Test<br>Test<br>Test<br>Test<br> Test<br>Test<br>Test<br>Test<br>Test<br>Test<br> Test<br>Test<br>Test<br>Test<br>Test<br>Test<br> Test<br>Test<br>Test<br>Test<br>Test<br>Test<br> Test<br>Test<br>Test<br>Test<br>Test<br>Test<br> Test<br>Test<br>Test<br>Test<br>Test<br>Test<br> Test<br>Test<br>Test<br>Test<br>Test<br>Test<br> Test<br>Test<br>Test<br>Test<br>Test<br>Test<br> Test<br>Test<br>Test<br>Test<br>Test<br>Test<br> Test<br>Test<br>Test<br>Test<br>Test<br>Test<br> Test<br>Test<br>Test<br>Test<br>Test<br>Test<br> Test<br>Test<br>Test<br>Test<br>Test<br>Test<br> Test<br>Test<br>Test<br>Test<br>Test<br>Test </div>