单击 javascript/html 后如何切换 div

Question

我正在尝试使用 div 来显示游戏规则，所以当他们 select 和 "button" 时它会显示规则，但我无法获取它通过重新select关闭它。我已经尝试了一些其他的解决方案，但它们并不是我想要的。

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

<input type="button" name="rules" value="How to Play!" onclick="showDiv()" />
<div id="howto"  style="display:none;" class="rules" > WELCOME</div>

Answer 1

您可以使用 toggleDiv 而不是 showDiv 函数来检查显示样式并将其设置为当前未设置的 block 或 none 中的任何一个.例如：

<script type="text/javascript">
function toggleDiv() {
 var div = document.getElementById('howto'); 
 div.style.display = (div.style.display == "block") ? "none" : "block";
}
</script>

<input type="button" name="rules" value="How to Play!" onclick="toggleDiv()" />
<div id="howto"  style="display:none;" class="rules" > WELCOME</div>