單擊時如何使我的內部 div 中的元素覆蓋整個外部 div？

Question

我有一個以屏幕為中心的 div (page2box)，它又分為不同的介紹性 div。 它們看起來像這樣：

我想要的是，當我點擊 Capture the Flag div 時，所有其他 div（Hackathon、Competitive prog... 和人工智能）消失，然后 Capture the Flag div 覆蓋整個 div（page2box）。

這是相關的代碼：

 #page2{ background: linear-gradient(-180deg, #2B1F2D, rgb(77, 35, 49), rgb(87, 23, 44)); height:100vh; } #page2box{ height:90vh; width: 90%; background-color: darkblue; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; } .page2Items{ height:100%; width:25%; } .upper{ height:40%; width:100%; font-family: 'Cinzel', Arial, Helvetica, sans-serif; font-size: 280%; display: flex; justify-content: center; align-items: center; text-align: center; } .lower{ height:60%; font-family: 'Average', sans-serif; width: 100%; display: flex; justify-content: center; align-items: center; font-size: 150%; text-align: center; } #elem1{ background-color: cyan; } #elem2{ background-color: red; } #elem3{ background-color: blueviolet; } #elem4{ background-color: orangered; }

 <div id = "page2"> <div id="page2box"> <div class="page2Items" id="elem1"> <div class="upper">Capture The Flag</div> <div class="lower">Lorem ipsum dolor sit amet, consectetit. Mosielit. Mosim felis libero, tincidunt eu odio vel, vulputate tinci Integer odio dolor, elementum in sem a, tristique cursus tortor. Duis sodales varius turpis ac aliquam. Integer congue fermentum posuere. Pellentesque varius massa at justo laoreet, non interdum nunc pretium. Integer porttitor tempor ante, vel laoreet sem placerat in.</div> </div> <div class="page2Items" id="elem2"> <div class="upper">Hackathon</div> <div class="lower">Lorem ipsum dolor sit amet, consectetit. Mosielit. Mosim felis libero, tincidunt eu odio vel, vulputate tinci Integer odio dolor, elementum in sem a, tristique cursus tortor. Duis sodales varius turpis ac aliquam. Integer congue fermentum posuere. Pellentesque varius massa at justo laoreet, non interdum nunc pretium. Integer porttitor tempor ante, vel laoreet sem placerat in.</div> </div> <div class="page2Items" id="elem3"> <div class="upper">Competitive Prog...</div> <div class="lower">Lorem ipsum dolor sit amet, consectetit. Mosielit. Mosim felis libero, tincidunt eu odio vel, vulputate tinci Integer odio dolor, elementum in sem a, tristique cursus tortor. Duis sodales varius turpis ac aliquam. Integer congue fermentum posuere. Pellentesque varius massa at justo laoreet, non interdum nunc pretium. Integer porttitor tempor ante, vel laoreet sem placerat in.</div> </div> <div class="page2Items" id="elem4"> <div class="upper">Artificial Intelligence</div> <div class="lower">Lorem ipsum dolor sit amet, consectetit. Mosielit. Mosim felis libero, tincidunt eu odio vel, vulputate tinci Integer odio dolor, elementum in sem a, tristique cursus tortor. Duis sodales varius turpis ac aliquam. Integer congue fermentum posuere. Pellentesque varius massa at justo laoreet, non interdum nunc pretium. Integer porttitor tempor ante, vel laoreet sem placerat in.</div> </div> </div> </div>

我試圖更改頁面的innerHTML，但這造成了很多混亂。 我該如何做到這一點？ 如果可能，請嘗試提出僅使用純 CSS 和/或 vanilla JS 的解決方案。

Answer 1

以下更改將完成這項工作：

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";
      }
    }
  }
}

在 HTML 添加 click 事件，傳遞每個 div 上的 id（用戶正在點擊）：

<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>

css 文件中不需要更改。 JS 將處理該功能。

希望這能按預期工作。

Answer 2

在上面將 onclick 函數添加到您的 div

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

並在 Javascript 代碼中添加以下 Javascript 代碼應該可以正常工作

function changeSize(elem) {

        elem.style.position = "absolute"
        elem.style.width = "100%"
    }

Answer 3

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

以下可以是步驟

1. 將 onclick 功能添加到您所有的 div/s
2. 擴展到被單擊子項的 100% 寬度和高度
3. 從 DOM 中隱藏其他元素（可見性：隱藏）
4. 並返回到以前的狀態（所有 4 個 div 可見）-處理 onclick 函數，以防用戶再次單擊 expand ，然后調整回其原始大小並使所有其他 div 元素可見：true

偽代碼可以

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
  }
}