时间戳

首页 > 解决方案 > 按下另一个div后如何隐藏一个div？

javascript - 按下另一个div后如何隐藏一个div？

问题描述

div在 JS 中经过一段时间后，我终于设法制作了一个弹出窗口，但问题是，我无法div让它消失，我想让它div在被点击后消失，但是，如何？

很抱歉问，但我一直在寻找听起来很简单的东西，但我似乎无法弄清楚如何使 div 可点击，然后在点击时使其消失，因此我想没有任何重要的代码显示。

编辑：似乎显示一些代码仍然很重要，但它很简单，只是一些用于使 div 出现的代码及其外观。所以这里是：

window.onload = function() {
  setTimeout(appeardiv, 30000);
}

function appeardiv() {
  document.getElementById("acceptbox3").style.display = "block"
}
.accept_square3 {
  background-color: rgb(255, 0, 0);
  position: fixed;
  top: 55.9%;
  left: 43.2%;
  height: 5vw;
  width: 13vw;
  display: none;
}
<div id="acceptbox3" class="accept_square3"></div>

好吧，我想这就是所有的剧本。

标签： javascripthtmlcss

解决方案

听起来你需要的只是click像这样添加一个处理程序

function appeardiv() {
  const acceptBox = document.getElementById("acceptbox3");
  acceptBox.style.display = "block";
  acceptBox.onclick = () => acceptBox.remove();
}

如果你不熟悉箭头函数，你也可以使用普通函数：

  acceptBox.onclick = function() { acceptBox.remove() };

此外，如果您需要添加多个处理程序，您可以使用

  acceptBox.addEventListener(() => acceptBox.remove());

反而。

结果是（不过，让我减少超时）：

window.onload = function() {
  setTimeout(appeardiv, 1000);
}

function appeardiv() {
  const acceptBox = document.getElementById("acceptbox3");
  acceptBox.style.display = "block";
  acceptBox.onclick = () => acceptBox.remove();
}
.accept_square3 {
  background-color: rgb(255, 0, 0);
  position: fixed;
  top: 55.9%;
  left: 43.2%;
  height: 5vw;
  width: 13vw;
  display: none;
}
<div id="acceptbox3" class="accept_square3"></div>

推荐阅读