javascript - 用于 Div 调整大小、展开和折叠的 JQuery/Javascript

Question

我们将不胜感激。

我有 3 个 div，父 div(红色)，顶部的 2 个子 div(蓝色)和底部的另一个(绿色)。这是我想要实现的目标:

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

我还希望它在单击“缩小蓝色 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/

Answer 1

试试这个代码:

$("#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/ 的演示