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

Question

任何帮助将不胜感激。

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

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

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

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

请注意 javascript 代码不应使用常数来计算“绿色”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/查看演示

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和Adjacent sibling selectors，以及::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');
});

这是工作小提琴

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


  })

})

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

加链接到小提琴Fiddle