Ändern Sie eine Höhe der Elemente dynamisch mit jQuery

Question

Ich brauche ein div, um die Höhe eines anderen Elements zu erhalten, wenn die Klasse collapsed nicht in diesem Element ist (Ich verwende bootstrap toggle collapse).

Es funktioniert, wenn die Seite geladen wird, aber wenn ich auf das Element klicke und die Klasse collapsed entfernt wird, ändert sich die #careheight Höhe nicht.

$(document).ready(function() { 
 
    var divHeight = $("#care_and_washing").height(); 
 
    if (!$("#care_and_washing").hasClass("collapsed")) { 
 
    $('#careheight').height(divHeight); 
 
    } else { 
 
    $('#careheight').height("10px"); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="care_and_washing" data-toggle="collapse" data-target="#demo" class="collapsed" style="font-family: 'NiveauGroteskMedium'; font-size: 11px; color: black;">Care & Washing</p> 
 

 
<div style="cursor: default; padding-left: 13px;" id="demo" class="collapse"> 
 
    <p style="font-family: Questrial, sans-serif; font-size: 10px;">• Dry Flat</p> 
 
    <p style="font-family: Questrial, sans-serif; font-size: 10px;">• Do Not Bleach</p> 
 
    <p style="font-family: Questrial, sans-serif; font-size: 10px;">• Tumble Dry Low</p> 
 
    <p style="font-family: Questrial, sans-serif; font-size: 10px;">• Iron Low</p> 
 
    <p style="font-family: Questrial, sans-serif; font-size: 10px;">• Hand Wash</p> 
 
</div> 
 

 
<div id="careheight"></div>

Answer 1

Dies geschieht, weil die Funktion nur auf dem Dokument Last genannt wird. Sie müssen es auch einem Klick zuweisen:

$(document).ready(function(){ 
    changeHeight(); 
}) 

$('.element-you-want-to-click').click(function() { 
    changeHeight() 
}); 

function changeHeight() { 
    var divHeight = $("#care_and_washing").height(); 

    if (!$("#care_and_washing").hasClass("collapsed")) { 
     $('#careheight').height(divHeight); 
    } 

    else { 
     $('#careheight').height("10px"); 
    } 
} 

Dies sollte funktionieren, wenn Ihre ursprüngliche Funktion funktionierte.