Question

所以我有这个HTML和JavaScript代码，点击一个按钮弹出一个图像，它工作得非常好。但是当图像弹出时......无论我在页面中单击哪个位置，都无法将其关闭。是否有一个javascript函数，允许您再次单击时取消显示它

这是我的代码

＆＃13;

	<script type="text/javascript">
function openImage(){
    document.getElementById('loadingImage').style.visibility="visible";
}
</script>

＆＃13;

#button {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: Transparent;
  border: solid #ffffff 2px;
  text-decoration: none;
}

＆＃13;

<button id="button" onClick="openImage();">Get Started</button>
<img id="loadingImage" src="PNG/Module.png" style="visibility:hidden"/>

＆＃13;

Answer 1

function openImage(){
if ( document.getElementById('loadingImage').style.visibility == "visible" ) {
    document.getElementById('loadingImage').style.visibility="hidden";
} else {
   document.getElementById('loadingImage').style.visibility="visible";
}

（为了清晰和调试，您可能希望将函数名称从openImage（）更改为toggleImage（））

显示图像onclick工作正常，但如何再次单击隐藏它

1 个答案: