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

尝试一下

#parent {
  display: flex;
}
#narrow {
  width: 20vw;
  position: absolute;
  left: calc(80vw - 10px);
  background: lightblue;
  z-index: 1;
  margin: 0;
}
#wide {
  width: calc(80vw - 10px); 
  background: lightgreen;
  transition: all 0.3s ease-out; 
}
.wider {
  width: 100vw!important;
  z-index: 2;
}

<div id="parent">
  <div id="wide" onclick="myFunction()">Div 1</div>
  <div id="narrow">Div 2</div>
</div>
<script>
function myFunction() {
  var element = document.getElementById("wide");
  element.classList.toggle("wider");
}
</script>

Answer 2

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

注意：更改不透明度完全是可选操作，我只是为了进一步说明“滑过”效果而做。

Answer 3

您可以使用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");
}

使用toggle（）的更短的方法；

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

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

Answer 4

您是否正在寻找类似这样的内容：JSFiddle？

JavaScript（纯）：

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

  }
}

CSS

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

}

HTML

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

Answer 5

您可以根据需要的效果更改div的z索引。我的建议是使用jQuery。单击div 1时，将一个类添加到div中，该类可修改zindex，即如果尚未添加该类，则将其删除。

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

5 个答案: