JQuery/Javascript Div 调整大小、展开和折叠

Question

我们将不胜感激。

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

当顶部 div（蓝色）resizes/increases 通过单击 "Expand Blue Div" 按钮调整大小时，底部 div（绿色）将 shrink/decreases 它的大小大小但保持在它的位置，这意味着，即使它改变了它的高度，它仍然应该保持在它的 x 轴上。简而言之，无论底部div（绿色）的高度如何，它都应该保持在原位。

我还希望它在单击 "Shrink Blue Div" 按钮时恢复所有原始大小。绿色和蓝色尺寸都将保持其原始尺寸。

我更喜欢这个 jquery/javascript 的完整解决方案。谢谢大家

请注意 javascript 代码不应使用常数来计算 "GREEN" div 的 size/height。例如，"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/

查看演示

Answer 2

如果你想要 CSS 唯一的解决方案，请看一下这个：

.parent-container {
    height: 300px;
    border: 1px solid red;
    padding: 2px;
    display: flex;
    flex-direction: column;
}

label[for=toggle-blue]::before {
    content: 'Expand';
}

.blue-container {
    border: 1px solid blue;
    flex-grow: 5;
}

#toggle-blue {
    display: none;
}

#toggle-blue:checked + label::before {
    content: 'Shrink';
}

#toggle-blue:checked + label + div {
    flex-grow: 20;
}

.green-container {
    border: 1px solid green;
    flex-grow: 10;
}

<div class="parent-container">
    <input id="toggle-blue" type="checkbox" />
    <label for="toggle-blue"></label>
    <div class="blue-container">

    </div>
    <div class="green-menu">
        <button>
            Button 1
        </button>
        <button>
            Button 2
        </button>
    </div>
    <div class="green-container">

    </div>
</div>

它使用CSS Flexible Boxes and Adjacent sibling selectors, as well as ::before Pseudo Element。

Answer 3

Jquery代码：

$("#expandDiv").click(function(event){
$('#shrinkDiv').removeClass('shrinked');
if(!$(this).hasClass('expanded')) {
    $("#blueDiv").animate({
        height: "+=150"
  });
  $(".green_table").animate({
    height: "-=150"
  });
  $(this).addClass('expanded');
} 

});

$("#shrinkDiv").click(function(event){

if( (!$(this).hasClass('shrinked')) && ($('#expandDiv').hasClass('expanded')) ) {
    $("#blueDiv").animate({
        height: "-=150"
  });
  $(".green_table").animate({
    height: "+=150"
  });
  $(this).addClass('shrinked');
}
      $('#expandDiv').removeClass('expanded');
});

这是工作fiddle

https://jsfiddle.net/0zLpgzsn/4/

Answer 4

/*CSS*/

  <style type="text/css">
  .parent_container {
    border: 5px solid red;
    height: auto;
    position:relative;
  }
  .blue_box {
    height: 50px;
    border: 5px solid blue;
  }
  .green_table {
    overflow-y: auto;
    border: 5px solid green;
    position:relative;
    height:50px;
  }
  .open{
    height:150px;
  }
  .closed{
    height:35px;
  }

  .btn_actions {
    padding: 10px;
  }
</style>

// jQuery

 $(document).ready(function(){

  $("#expandDiv").on("click", function(){

    if(!$("#blueDiv").hasClass("open")){
      $("#blueDiv").addClass("open");  
    }
    if(!$(".green_table").hasClass("closed")){
        $(".green_table").addClass("closed");
    }

  })

  $("#shrinkDiv").on("click", function(){

    if($("#blueDiv").hasClass("open")){
      $("#blueDiv").removeClass("open");  
    }
    if($(".green_table").hasClass("closed")){
        $(".green_table").removeClass("closed");
    }


  })

})

这是基于您的解决方案和要求:)

加上link到fiddleFiddle

JQuery/Javascript Div 调整大小、展开和折叠

JQuery/Javascript for Div resizing, expand and collapse

html

javascript

css

jquery