單擊javascript / html后如何切換div

Question

我正在嘗試使用div來顯示游戲規則，因此當他們選擇“按鈕”時，它將顯示規則，但是我無法通過重新選擇規則來使其關閉。 我嘗試了其他一些解決方案，但它們並不是我想要的。

<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函數來檢查顯示樣式並將其設置為當前未設置的none block或none block 。 例如：

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