Javascript 如何使我的内部div中的元素在单击时覆盖整个外部div？

我有一个div（page2box），它位于屏幕的中心，然后依次划分为不同的div。它们看起来像这样：

我想要的是，当我点击Capture the Flag div时，所有其他div（Hackathon、Competitive prog…和人工智能）消失，然后Capture the Flag div覆盖整个div（page2box）

以下是相关代码：

#第2页{
背景：线性梯度（-180度，#2B1F2D，rgb（77,35,49），rgb（87,23,44））；
高度：100vh；
}
#第2页框{
高度：90vh；
宽度：90%；
背景色：深蓝色；
位置：相对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
显示器：flex；
}
.Page2项目{
身高：100%；
宽度：25%；
}
.上{
身高：40%；
宽度：100%；
字体系列：“Cinzel”，Arial，Helvetica，无衬线；
字号：280%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
}
.下{
身高：60%；
字体系列：“平均”，无衬线；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：150%；
文本对齐：居中；
}
#elem1{
背景色：青色；
}
#elem2{
背景色：红色；
}
#elem3{
背景色：蓝紫色；
}
#elem4{
背景颜色：橙色；
}

夺取旗帜
Lorem ipsum dolor sit amet，Concertetit。莫西利特。Mosim felis libero，tincidunt eu odio vel，vulputate tinci Integer odio dolor，sem a中的元素，tristique cursus tortor。杜松子豆。整罐发酵啤酒。在justo laoreet，非interdum nunc pretium的Pellentsque varius massa。时间前的整数端口，水平laoreet sem放置。
编程马拉松
Lorem ipsum dolor sit amet，Concertetit。莫西利特。Mosim felis libero，tincidunt eu odio vel，vulputate tinci Integer odio dolor，sem a中的元素，tristique cursus tortor。杜松子豆。整罐发酵啤酒。在justo laoreet，非interdum nunc pretium的Pellentsque varius massa。时间前的整数端口，水平laoreet sem放置。
竞争性项目。。。
Lorem ipsum dolor sit amet，Concertetit。莫西利特。Mosim felis libero，tincidunt eu odio vel，vulputate tinci Integer odio dolor，sem a中的元素，tristique cursus tortor。杜松子豆。整罐发酵啤酒。在justo laoreet，非interdum nunc pretium的Pellentsque varius massa。时间前的整数端口，水平laoreet sem放置。
人工智能
Lorem ipsum dolor sit amet，Concertetit。莫西利特。Mosim felis libero，tincidunt eu odio vel，vulputate tinci Integer odio dolor，sem a中的元素，tristique cursus tortor。杜松子豆。整罐发酵啤酒。在justo laoreet，非interdum nunc pretium的Pellentsque varius massa。时间前的整数端口，水平laoreet sem放置。

在上面，将onclick函数添加到您的div中

<div class="page2Items" id="elem4" onclick="changeSize(elem4)">

---

以下更改将完成此工作：

function expand(targetElementId) {
  let targets = document.getElementsByClassName("page2Items");

  let target = document.getElementById(targetElementId);
  if(target.style.width=="100%"){
    for (let i = 0; i < targets.length; i++) {
      targets[i].style.width = "25%";
      targets[i].style.display = "inline-block";
    }
  } else {
    for (let i = 0; i < targets.length; i++) {
      if (targets[i].id == targetElementId) {
        targets[i].style.width = "100%";
      } else {
        targets[i].style.display = "none";
      }
    }
  }
}

函数展开（targetElementId）{
让targets=document.getElementsByClassName（“page2Items”）；
让target=document.getElementById（targetElementId）；
如果（target.style.width==“100%”）{
for（设i=0；i

在HTML add click事件中，在每个div（用户正在单击）上传递id：

。。。
...
...
...

css文件中不需要更改。JS将处理该功能

---

希望它能如预期的那样工作。

**您可以使用javascript控制它**

以下可以是步骤

将onclick函数添加到所有div/s

扩展到单击子对象的100%宽度和高度

从DOM中隐藏其他元素（可见性：隐藏）

要返回到以前的状态（所有4个div都可见），请在onclick函数中处理，以防用户再次单击expanded，然后将大小调整回其原始大小并使所有其他div元素可见：true

Psudo代码可以是

var toggleFunction = function()
{
   var lastElementRef;
   return function(event) 
  {
    if(event.target !== lastElement)
     //handle expand and hide other element 
    else 
    // go back to original state, Resize the click again clicked item and resize and show all the elements
  }
}

---

这太完美了！非常感谢你。你能再帮我一点忙吗？比如说，如果我想在单击div后添加一个按钮以返回到以前的状态，我应该怎么做！？请在JSFiddle中找到演示示例：但是那里没有我可以点击的按钮，它会把我带回到原来的div。你能告诉我怎么做吗？是的，这是可以做到的。请参考所附的链接。再次单击div时，它将返回正常状态。链接-太棒了！我之前没注意到！非常感谢：-）

<div #elem1 class="page2Items" id="elem1" onclick="expand('elem1')">...</div>
<div #elem2 class="page2Items" id="elem2" onclick="expand('elem2')">...</div>
<div #elem3 class="page2Items" id="elem3" onclick="expand('elem3')">...</div>
<div #elem4 class="page2Items" id="elem4" onclick="expand('elem4')">...</div>

var toggleFunction = function()
{
   var lastElementRef;
   return function(event) 
  {
    if(event.target !== lastElement)
     //handle expand and hide other element 
    else 
    // go back to original state, Resize the click again clicked item and resize and show all the elements
  }
}