Höhe aller Divs einheitlich einstellen

Question

Ich habe ein Drop-Down mit Slide-Up und Slide-Down-Animation in einem Div.

Wenn das Dropdown-Menü geöffnet ist, lautet die Höhe des DIVs 124px, sonst ist es 20px. Ich habe ein anderes div, für das die Höhe gleich dem ersten div sein soll, wenn die Höhe des Drop-downs von div animiert wird.

I jquery 1.11.0

Hier bin mit meinem Code:

$(".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.

Was kann ich tun?

Edit: Ich möchte nur die Höhe für beide Divs immer gleich sein.

Wenn sich div 1 Höhe ändert, sollte die js/jQuery die gleiche Höhe auf div 2 setzen.

$(".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

Dies ist ideal für Sie:

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