javascript - 单击它时如何使一个div越过另一个div？

Question

我有这 2 个 div，当我点击 div 1 时，我希望它越过第二个 div，如果我再次点击 Div 1，我希望它回到原来的位置(我希望 Div 1 增加它的宽度因此它超过了第二个 Div)。这是我的代码，其中我的 2 个 div 彼此相邻。谁能指出我如何实现这一目标的正确方向？非常感谢!

注意: - 请不要使用 jQuery。我正在尝试使用 javascript 和 css 来完成此任务。

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Div 1</div>
  <div id="narrow">Div 2</div>
</div>

Answer 1

如果你愿意放弃 flex，你可以结合使用 float 、postion:absolute 和 transition 这样主 div “滑过”另一个 div

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

function toggleWidth() {
  this.classList.toggle("active");
}

#parent {
  position: relative;
}

#narrow {
  width: 200px;
  background: lightblue;
  float: right;
}

#wide {
  position: absolute;
  background: lightgreen;
  width: calc(100% - 200px);
  transition: width 2s;
}

#wide.active {
  width: 100%;
  opacity: 0.9;
}

<div id="parent">
  <div id="wide">Div 1</div>
  <div id="narrow">Div 2</div>
</div>

注意:更改不透明度完全是可选的，我这样做只是为了进一步说明“滑过”效果。