JQuery/Javascript for Divのサイズ変更、展開および折りたたみ

Question

何か助けていただければ幸いです。

私は3つのdiv、親div（赤色）、2つの子divs（青色）と下位（緑色）の2つのdivを持っています。

上部のdiv（青色）が "Expand Blue Div"ボタンをクリックしてサイズを変更すると、下部のdiv（緑色）はサイズを縮小/縮小しますが、そのままにしますつまり、高さが変わってもx軸上に残ります。要するに、下部のdiv（緑色）の高さにかかわらず、それはその位置にとどまるはずです。

"Shrink Blue Div"ボタンをクリックすると元のサイズに戻ります。緑色と青色の両方のサイズが元のサイズになります。

私はこれに完全なjquery/javascriptソリューションを推奨します。ありがとうすべて

はjavascriptのコードは、「GREEN」のdivのサイズ/高さの計算に一定の数値を使用すべきではありませんのでご注意ください。たとえば、 "greendiv.height = 100 - 5px" < <のように、定数を使用しないでください。ここで

$("#expandDiv").click(function(){ 
 
\t $("#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'); 
}); 

は、これはあなたのソリューションとrequitrementsに基づいて作業フィドル

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をいじります