如何使div在点击后消失并显示其下面的内容

Question

我有一个div类的hide。本质上是div，背景为黑色。假设此div隐藏了food div。因此，当您单击黑色背景时，也就是如果您在click div上hide，则假定所有hide div消失并显示food div 。但是，我的问题是这没有发生。 hide div未显示。下面是我当前的代码：

function make_disappear(){
    document.getElementByClassName('hide').style.display = 'none';
}

.main {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px
    margin: 5px;
    background: red;
}

.hide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: url(https://i.imgur.com/Y8B7LsB.jpg);
}

.food {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
}

<div class="main">
    <div onclick="make_disappear()" class="hide"></div>
    <div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div>
</div>

<div class="main">
    <div onclick="make_disappear()" class="hide"></div>
    <div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div>
</div>

Answer 1

我喜欢在动画/转换一堆相同类型或类的元素时使用委托模式。在将z-index: 1元素添加到.hide元素以使其按堆叠顺序位于图像的顶部之后，我在单击disappear时将body类添加到.hide CSS个元素中。 .hide处理其余部分，同时使所有body元素淡出。如果DOM在const hide = document.querySelectorAll('.hide'); function handleClick() { document.body.classList.add('disappear'); } hide.forEach(el => { el.addEventListener('click', handleClick); });中的位置过高，则也可以在包装元素上使用此方法。

.main {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 120px margin: 5px;
  background: red;
}

.hide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: url(https://i.imgur.com/Y8B7LsB.jpg);
  z-index: 1;
  transition: .5s opacity;
}

.disappear .hide {
  opacity: 0;
}

.food {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

<div class="main">
  <div class="hide"></div>
  <div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div>
</div>

<div class="main">
  <div class="hide"></div>
  <div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div>
</div>

{{1}}

https://jsfiddle.net/2rvte9y3/1/

Answer 2

您的问题在于如何渲染divs，首先渲染hide div，而不要覆盖上方的食物divs，因为它们都具有{ {1}}。只是这样重新排列他们的html：

position: absolute

或将<div class="main"> <div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div> <div onclick="make_disappear()" class="hide"></div> </div> div的z-index更改为高于hide div的div：

food

您的JS也将不起作用，因为正如@wentjun指出的那样，.hide { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: url(https://i.imgur.com/Y8B7LsB.jpg); z-index: 100; /* here */ } 返回一个节点列表。您只需要遍历列表即可更改每种显示样式，如下所示：

document.getElementsByClassName

Answer 3

getElementsByClassName()返回具有指定类名（在您的情况下为.hide）中文档中所有元素的NodeList集合。

执行document.getElementByClassName('hide').style而不指定索引将不起作用，因为它是一个列表。

您将需要遍历NodeList，或者专门在NodeList中选择索引作为目标

document.getElementsByClassName('hide')[0].style.display = 'none';

要隐藏NodeList中的所有元素，可以执行以下操作：

[...document.getElementByClassName('hide')].map(node => node.style.display = 'none')

Answer 4

一种解决方案是向z-index元素添加更大的hide。另外，请注意，getElementsByClassName()将返回HTMLCollection，而不仅仅是您期望的一个元素。因此，您将不得不遍历集合以将样式应用于每个元素。

function make_disappear()
{
    var elems = document.getElementsByClassName('hide');

    for (let e of elems)
    {
        e.style.display = "none";
    }
}

.main {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px
    margin: 5px;
    background: red;
}

.hide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    z-index: 99;
    background: url(https://i.imgur.com/Y8B7LsB.jpg);
}

.food {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
}

<div class="main">
    <div onclick="make_disappear()" class="hide"></div>
    <div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div>
</div>

<div class="main">
    <div onclick="make_disappear()" class="hide"></div>
    <div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div>
</div>