Javascript 如何使一个div在点击时覆盖另一个div？

我有这两个div，当我点击div 1时，我想让它越过第二个div，如果我再次点击div 1，我想让它回到它原来的位置，我想让div 1增加它的宽度，使它越过第二个div。这是我的代码，我的两个div相邻。有谁能给我指出如何实现这一目标的正确方向吗？提前多谢

注: -请不要用jQuery。我正试图用javascript和css来实现这一点

母公司{ 显示器：flex； } 狭窄的{ 宽度：200px； 背景：浅蓝色； } 宽阔的{ 弹性：1； 背景：浅绿色； } 第一组 第2组

---

可以根据所需效果更改div的z索引。我的建议是使用jQuery。单击div1，向修改zindex的div添加一个类，也就是说，如果尚未添加该类，则将其删除

您可以使用JavaScript进行尝试。 首先，准备CSS：

#narrow {
  width: 200px;
  transition: 0.32s;
  overflow: hidden;
}
#wide.fullwidth ~ #narrow {
  width: 0;
  opacity: 0;
}

然后，JavaScript，如下所示：

document.querySelector("#wide").onclick = changeDivWidth;

var wideFull = false;

function changeDivWidth () {
   if (!wideFull) {
     this.classList.add("fullwidth");
     wideFull = true;
     return; // if variable wideFull is false, function stops here
   }
   wideFull = false;
   this.classList.remove("fullwidth");
}

使用切换的较短方法

document.querySelector("#wide").onclick = changeDivWidth;

function changeDivWidth () {
     this.classList.toggle("fullwidth");
}

---

你在找这样的东西吗

纯JavaScript：

CSS

HTML

试试这个

母公司{ 显示器：flex； } 狭窄的{ 宽度：20vw； 位置：绝对位置； 左：calc80vw-10px； 背景：浅蓝色； z指数：1； 保证金：0； } 宽阔的{ 宽度：calc80vw-10px； 背景：浅绿色； 过渡：所有0.3秒放松； } .更广泛{ 宽度：100vw！重要； z指数：2； } 第一组 第2组 函数myFunction{ var element=document.getElementByIdwide； element.classList.toggleWide； }

---

如果您愿意放弃flex，可以使用float、position:absolute和transition的组合，以便主div在另一个div上滑动

document.querySelectorwide.onclick=toggleWidth； 函数切换宽度{ this.classList.toggleactive； } 母公司{ 位置：相对位置； } 狭窄的{ 宽度：200px； 背景：浅蓝色； 浮动：对； } 宽阔的{ 位置：绝对位置； 背景：浅绿色； 宽度：calc100%-200px； 过渡：宽度2s； } 广泛的，活跃的{ 宽度：100%； 不透明度：0.9； } 第一组 第2组

---

我不想为此使用jQuery，因为您没有包含任何您尝试过的JavaScript，所以您在这里受到了抨击。上面写着，这是我需要的，现在去帮我做吧。你把这件事复杂化了。。简单地使用CulsListTwitter只是试图让他更容易阅读，因为我认为了解基本知识非常重要。补充回答。

function HideDivOne(){
  var wide = document.getElementById("wide");
  var narrow = document.getElementById("narrow");

  if (wide.style.width == "70%"){
    wide.style.width = "100%";
    narrow.style.width = "0%";
    narrow.style.opacity = "0";
  }
  else{
    wide.style.width = "70%";
    narrow.style.width = "30%";
    narrow.style.opacity = "1";

  }
}

#parent {
display: flex;
}
#narrow {
  width: 30%;
  background: lightblue;
  height: 20px;
  transition: 0.2s;
}
#wide {
  width: 70%;
  flex: 1;
  background: lightgreen;
  height: 20px;
  transition: 0.2s;

}

<div id="parent">
  <div id="wide" onclick="HideDivOne()">Div1</div>
  <div id="narrow" onclick="HideDivTwo()">Div2</div>
</div>