如何使用 javascript 进行 on/off 切换？

Question

所以当用户点击 link 时，应该显示一个特定的元素，当用户再次点击那个 link 时，该元素应该 hide.I 尝试这样做，但是有一个我的 code.It 问题只发生 once.I 想无限发生 times.Can 有人帮忙吗？

<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

不确定你为什么要进行循环，但这里是你如何只用一个监听器来完成点击部分：

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 进行 on/off 切换？

How to make an on/off switch using javascript?

html

javascript

onclick