时间戳

首页 > 解决方案 > 点击时如何让一个div越过另一个div？

javascript - 点击时如何让一个div越过另一个div？

问题描述

我有这 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>

标签： javascripthtmlcss

解决方案

如果你愿意放弃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>

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

推荐阅读