單擊時如何使 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>

注意：更改不透明度完全是可選的，我這樣做只是為了進一步說明“滑動”效果。

Answer 2

嘗試這個

 #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 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-index。 我的建議是使用 jQuery。 在div 1上點擊添加一個類到修改zindex的div中，也就是說，如果這個類還沒有被添加，如果是的話，刪除它。