如何使用JavaScript進行開/關切換？

Question

所以當用戶點擊鏈接時，應該顯示一個特定的元素，當用戶再次點擊該鏈接時，該元素應該隱藏。無限次。有人可以幫忙嗎？

 <html> <head> <style> #test { width: 200px; height: 200px; background-color: black; display: none; } </style> </head> <body> <script type="text/javascript"> window.onload = function() { var yes = 10; for (i = 0; i < 100; i++) { if (yes == 10) { document.getElementById("test1").onclick = function() { document.getElementById("test").style.cssText = "display:block;" yes = yes + 1; if (yes == 11) { document.getElementById("test1").onclick = function() { document.getElementById("test").style.cssText = "display:none;" yes = yes - 1; } } } } } } </script> <a id="test1" href="#">link</a> <div id="test"></div> </body> </html>

Answer 1

您只能將onclick設置一次。

編寫函數，以便它首先檢查元素是否可見，然后顯示或隱藏它。

（也可以使用.style.display而不是.style.cssText ）

Answer 2

您正在做的事情比您需要做的更多。

只需檢查div是否當前顯示（如果顯示），將其隱藏（如果未顯示）。

您的腳本標簽可以減少為：

<script>
  document.getElementById('test1').addEventListener('click', function() {
    var theDiv = document.getElementById('test');

    if(theDiv.style.display === 'block') {
      theDiv.style.display = 'none';
    } else {
      theDiv.style.display = 'block';
    }
  });
</script>

Answer 3

不確定為什么要執行循環，但是這是僅用一個偵聽器即可完成click部分的方法：

 var el = document.getElementById("test"); document.getElementById("test1").onclick = function() { if (el.style.display == "block") { el.style.display = "none"; } else { el.style.display = "block"; } }

 #test { width: 200px; height: 200px; background-color: black; display: none; }

 <a id="test1">link</a> <div id="test"></div>

如何使用JavaScript進行開/關切換？

問題描述

3 個解決方案

解決方案1
1 2015-04-29 18:22:08

解決方案2
1 2015-04-29 18:29:27

解決方案3
1 已采納 2015-04-29 18:32:57

如何使用JavaScript進行開/關切換？

問題描述

3 個解決方案

解決方案1 1 2015-04-29 18:22:08

解決方案2 1 2015-04-29 18:29:27

解決方案3 1 已采納 2015-04-29 18:32:57

解決方案1
1 2015-04-29 18:22:08

解決方案2
1 2015-04-29 18:29:27

解決方案3
1 已采納 2015-04-29 18:32:57