用于Div调整大小，扩展和折叠的JQuery / Javascript

rocky 发表于 Dev

洛基

任何帮助将不胜感激。

我有3个div，父div（红色），顶部2个子div（蓝色），底部2个子div（绿色）。这是我要实现的目标：

当顶部div（蓝色）通过单击“扩展蓝色Div”按钮来调整大小/增加其大小时，底部div（绿色）将缩小/减小其大小但仍保持在其位置，这意味着它仍应保持在其x-轴，即使它改变了它的高度。简而言之，无论底部div（green）的高度如何，都应保持其位置不变。

我还希望在单击“收缩蓝色Div”按钮时恢复其所有原始大小。绿色和蓝色尺寸都将保持其原始尺寸。

我更喜欢在此上使用完整的jquery / javascript解决方案。谢谢你们

请注意javascript代码不应使用常数来计算“ GREEN” div的大小/高度。例如，“ greendiv.height = 100-5px” <<，我们应避免对此使用常量。

$("#expandDiv").click(function(){
	$("#blueDiv").css("height","150px");
});

.parent_container {
  border: 5px solid red;
  height: 400px;
}
.blue_box {
  height: 50px;
  border: 5px solid blue;
}
.green_table {
  overflow-y: auto;
  border: 5px solid green;
  position:relative;
  height:250px;
}

.btn_actions {
  padding: 10px;
}

<div class="parent_container">
  <div class="btn_actions">
    <button class="btn" id="expandDiv">Expand Blue Div</button>
    <button class="btn" id="shrinkDiv">Shrink Blue Div</button>
  </div>
  <div class="blue_box" id="blueDiv">
    
  </div>
  <div class="btn_actions">
    <button class="btn">Download Data</button>
    <button class="btn">Sort Data</button>
  </div>
  <div class="green_table">
      </div>
</div>

这是我的JSFiddle：https ://jsfiddle.net/koykoys/0zLpgzsn/1/

达南杰（Dhananjay）

试试下面的代码：

$("#expandDiv").click(function(){
   var $blueDiv = $("#blueDiv"), $greenDiv = $(".green_table");
   var blueDivHeight = $blueDiv.height(), greenDivHeight = $greenDiv.height();
   var updatedblueDivHeight = 150;
   var incrementedblueDivHeight = updatedblueDivHeight - blueDivHeight; 
     $blueDiv.height(updatedblueDivHeight);
   $greenDiv.height(greenDivHeight - incrementedblueDivHeight);
});

请参阅https://jsfiddle.net/0zLpgzsn/2/上的演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。