javascript - 使用与打开文本相同的按钮隐藏文本

Question

如何通过单击同一按钮来隐藏单击按钮时打开的文本？换句话说，同一个按钮应该在您单击时显示或隐藏文本。

这是我显示文本的代码:

<h3> 
    <button class="button" onclick="myFunction()" ><img src="infoicon.png" height="30"></button>
                    <p id="infos"></p>

                    <script>
                        function myFunction() {
                            document.getElementById("infos").innerHTML = "blablabla";
                    }
                    </script>
</h3>

Answer 1

定义一个变量来保存按钮状态

var clicked = 0;
function myFunction() {
  if(clicked == 0 ) {
    document.getElementById("infos").innerHTML = "blablabla";
    clicked = 1;
  } else {
      document.getElementById("infos").innerHTML = "";
      clicked = 0;
  }
}

<h3> 
  <button class="button" onclick="myFunction()" ><img src="infoicon.png" height="30"></button>
  <p id="infos"></p>
</h3>