javascript - 用javascript显示后隐藏div

Question

我正在使用 javascript 通过单击按钮来显示隐藏的 div。 div显示后，我希望能够再次点击按钮，隐藏div，等等...

这是我的javascript:

<script type="text/javascript">
function showDiv() {
   document.getElementById('dropdownText').style.display = "block";
}
</script>

这是按钮:

<input type="button" name="answer" value="+" onclick="showDiv()" />

这是隐藏的div:

<div id="dropdownText" style="display:none;">
   This is the dropdown text.
</div>

Answer 1

例如，您可以将指定的类绑定(bind)到元素并仅切换它。

function showDiv() {
   document.getElementById('dropdownText').classList.toggle("hidden");
}

.hidden {
  display: none;
}

<input type="button" name="answer" value="+" onclick="showDiv()" />
This is the hidden div:

<div id="dropdownText" class='hidden'>
   This is the dropdown text.
</div>