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

Posted 2023-03-07

【中文标题】用于 Div 调整大小、展开和折叠的 JQuery/Javascript

【英文标题】：JQuery/Javascript for Div resizing, expand and collapse

【发布时间】：2016-12-19 02:45:16

【问题描述】：

任何帮助将不胜感激。

我有 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/

【问题讨论】：

您需要的是一个仅高度不同的开放/封闭类。当您单击一个 div 时，使用 javascript 添加开放类，同时从另一个 div 中删除封闭类

谢谢Martin的回复，但是我在“Green” div里面有一个表，如果我要创建2个类，那么一个类的数据会转移到另一个类吗？

“Green” div 内的内容不应被转移，因为那是“Green” div 标记的全部部分

【参考方案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/查看演示

【讨论】：

哇！！非常感谢@Dhananjay，这正是我想要实现的，但是当你点击“Shrink blue div”时，你能帮我恢复它们的所有尺寸吗？

【参考方案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。

【讨论】：

谢谢 skobaljic，但我真的更喜欢 jquery 解决方案。

【参考方案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/

【讨论】：

您好，先生，感谢您提供的这个出色的解决方案，它确实有效，但我的错误是我忘记在我的描述中添加我们不应该使用常量/固定数字来更改“绿色”的大小div，但是这个答案非常有用；），非常感谢

U 可以动态计算高度并存储在变量中。根据你的目的使用它。

【参考方案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

【讨论】：

您好，先生，感谢您提供的这个出色的解决方案，它确实有效，但我的错误是我忘记在我的描述中添加我们不应该使用常量/固定数字来更改“绿色”的大小div，但是这个答案非常有用；），非常感谢

@Reymark 没问题，它是一个简单的解决方案，可以调整:)