点击后隐藏图片，再次点击显示是否有方法实现？

Question

我有一个图像覆盖了一个对象。我希望单击并隐藏它，显示对象（360 度虚拟游览），然后如果单击虚拟游览，则显示完全相同的图像。

<img src="https://i.ibb.co/ZBkxZHW/360-overlay-white.png" onclick="this.style.display='none';" style="position:absolute;opacity:;left:0%;top:0%;width:100%;height:400px;margin-left:0px;margin-top:0px;z-index:100;" />

<object scrolling="no" data="https://via.placeholder.com/400" width="100%" height="400" type="text/html">
</object>

Answer 1

我不确定您想要什么隐藏行为，但如果页面中应保留空间，您可以切换可见性属性。

您可以使用事件侦听器而不是内联 JavaScript 来完成此操作。另请注意，对象没有单击事件，因此我们将其放在包装器上并禁用对象上的单击事件。请参阅如何将点击事件绑定到对象标记？。< /p>

document.querySelector('.img-thumb').addEventListener('click', event => {
  event.currentTarget.style.visibility = 'hidden';
  document.querySelector('.obj-wrapper').style.visibility = 'visible';
});

document.querySelector('.obj-wrapper').addEventListener('click', event => {
  event.currentTarget.style.visibility = 'hidden';
  document.querySelector('.img-thumb').style.visibility = 'visible';
});

.img-thumb {
  position: absolute;
  opacity: ;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 400px;
  margin-left: 0px;
  margin-top: 0px;
  z-index: 100;
}

.obj-wrapper {
  visibility: hidden;
}

.obj-wrapper object {
  pointer-events: none;
}