すべてのdivの高さを一様に設定

Question

div内にスライドアップとスライドダウンのアニメーションをドロップダウンしました。

ドロップダウンが開いているとき、divの高さは124px、それ以外の場合は20pxです。 divのドロップダウンの高さをアニメーション化するとき、最初のdivの高さと同じ高さにする必要がある別のdivもあります。私はここでjqueryの1.11.0

を使用しています

は私のコードです：

$(".dropdown").hide(); 
$('.title').on('click', function(){ 
    var element = $(".dropdown"); 
    if (element.hasClass('open')) { 
    element.removeClass('open'); 
    element.slideUp(); 
    } 
    else { 
    element.addClass('open'); 
    element.slideDown(); 
    } 
}); 

here is my fiddle。

どうすればよいですか？

編集： 私は両方のdivの常に同じ高さにします。

div 1高さが変更されている場合、js/jQueryは同じ高さをdiv 2に設定する必要があります。

$(".dropdown").hide(); 
 
$('.title').on('click', function() { 
 
    var element = $(".dropdown"); 
 
    if (element.hasClass('open')) { 
 
    element.removeClass('open'); 
 
    element.slideUp(); 
 
    } else { 
 
    element.addClass('open'); 
 
    element.slideDown(); 
 
    } 
 
});

.d1 { 
 
    border: 1px solid #333; 
 
} 
 
.d2 { 
 
    border: 1px solid #333; 
 
} 
 
.title { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="d1"> 
 
    <a class="title">title(click here)</a> 
 
    <ul class="dropdown"> 
 
    <li>aaaa</li> 
 
    <li>aaaa</li> 
 
    <li>aaaa</li> 
 
    <li>aaaa</li> 
 
    </ul> 
 
</div> 
 
<br/> 
 
<div class="d2"> 
 
    <a>victim</a> 
 
</div>

Answer 1

これはあなたのために完全である：、あなたがドロップダウンを持つように、第二のdivをしたい

var slideDown = $("#d1").height(); 
$(".dropdown").hide(); 
var slideUp = $("#d1").height(); 
$('.title').on('click', function(){ 
    var element = $(".dropdown"); 
    if (element.hasClass('open')) { 
    element.removeClass('open'); 

    element.slideUp(400, function(){}); 
    $("#d2").animate({height: slideUp}, 500); 

    } 
    else { 
    element.addClass('open'); 
    element.slideDown(400, function(){}); 
    $("#d2").animate({height: slideDown}, 500); 

    } 
}); 

JSFiddle

Answer 2

$(".dropdown").hide(); 
$('.title').on('click', function(){ 
    var element = $(".dropdown"); 
    if (element.hasClass('open')) { 
    element.removeClass('open');  
    element.slideUp(); 
     -get the height of the dropdown 
    // var elHeight = $('.dropdown').css('height') + 'px'; 
    -apply height to other div 
    // $('.otherdiv').css("height",elHeight) 
    } 
    else { 
    element.addClass('open'); 
    element.slideDown(); 
    // var elHeight = $('.dropdown').css('height') + 'px'; 
    // $('.otherdiv').css("height",elHeight); 
    } 
});