Finden Sie die Höhe des geöffneten Panel Akkordeon mit JQuery

Question

Ich möchte die Höhe eines geöffneten Panel eines Akkordeons berechnen und verwenden Sie es als Variable.

Sobald ich die Seite geladen habe, ist das Panel geschlossen, so dass es eine kleinere Höhe als das Panel hat, wenn es geöffnet wird. Ich möchte die Höhe finden, nachdem ich auf den Paneltitel geklickt habe und dieser vollständig geöffnet wurde.

Wie könnte ich es tun?

Answer 1

Es gibt zwei Möglichkeiten, um eine Element Höhe mit jQuery

$("#elementId").height(); 

Oder

$("#elementId").css("height"); 

Der Unterschied zwischen CSS- ("Höhe") und .height() zu bekommen, ist, dass die letztere zurückkehrt ein einheitsloser Pixelwert (z. B. 400), während ersterer einen Wert mit intakten Einheiten (z. B. 400px) zurückgibt. Die Methode .height() wird empfohlen, wenn die Höhe eines Elements in einer mathematischen Berechnung verwendet werden soll.

Check jQuery docs on height here

---

Dann die Höhe Ihrer Platte zu wissen, nachdem es geöffnet hat, Sie zu binden ein Ereignis-Listener auf die gewünschte Akkordeon Veranstaltung benötigen.

Da Sie jQuery verwenden, können Sie die .on Funktion auf ein Ereignis zu binden verwenden:

$("#elementId").on("eventName", function() { 
    console.log($(this).height()); 
}); 

Unten ist die Dokumentation über die genauen Ereignisse, die Sie brauchen binden würden, wenn Sie ein Bootstrap-Akkordeon verwenden oder ein jQuery UI Akkordeon (konnte ich mit einem Codebeispiel genauer sein, wenn ich wüsste, welche Art von Akkordeon Sie wurden mit)

Bootstraps collapse accordion Events

jQuery UI accordion Events