JQuery Accordion Auto Height Problem

76

Ich benutze JQuery Accordion. Ich habe diese Seite hier: http://www.hauppauge.com/site/support/support_colossus.html#tabs-6

Das Laden der automatischen Höhe dauert einige Zeit, bevor sie geladen wird. Unter dem Inhalt befindet sich viel Leerraum. Wenn es endlich geladen wird, wird die Höhe länger und schnappt dann auf die richtige Höhe des Inhalts. Gibt es eine Möglichkeit, dies nahtlos zu gestalten? Ich möchte nur in der Lage sein, auf eine Registerkarte "Akkordeon" zu klicken und sie reibungslos auf die exakte Höhe des Inhalts erweitern zu lassen.

Update 08.08.2014:

Verwenden heightStyle: "content"Sie diese Option, wenn Sie Version 1.9 und höher verwenden ( Taruns Antwort).

Verwenden Sie autoHeight: falsefür 1.8 und niedriger (iappwebdevs Antwort)

jquery accordion

— Kim
quelle

Sie wenden 274irgendwo Höhe an . versuchen Sie es zu entfernen oder zumindest zu reduzieren.

— Imdad

Ich habe gerade danach gesucht und ich habe keine Ahnung, wo ich das habe. Wie siehst du das? Dankeschön!

— Kim

Inspizieren Sie mit Firebug. Die Standardhöhe ist, dass 274es nicht so viel sein sollte

— Imdad

57

Warum setzen Sie nicht einfach autoheightauf false?

$( ".selector" ).accordion({ autoHeight: false });

http://jqueryui.com/demos/accordion/#option-autoHeight

BEARBEITEN

Betrachten Sie Ihren Kommentar:

// Accordion
$("#accordion").accordion({ header: "h3" });
$("#accordion").accordion({ collapsible: true });
$("#accordion").accordion({ autoHeight: false, navigation: true });

Sie initialisieren das Akkordeon und fügen ihm dann weitere Optionen hinzu. warum machen Sie das? Der Standardwert für autoHeightist true, sodass jede Registerkarte eine feste Höhe erhält. Alle Optionen in einem Anruf zusammenfassen:

// Accordion
$("#accordion").accordion({
    header: "h3",
    collapsible: true,
    autoHeight: false,
    navigation: true 
});

BEARBEITEN

Zu Ihrem 2. Kommentar:

Schauen Sie sich http://jqueryui.com/demos/accordion/#option-header an . Sie können sehen, dass diese Option h3standardmäßig festgelegt ist, sodass Sie sie in Ihrem Anruf nicht festlegen müssen.

Und hier erhalten Sie eine Antwort auf Ihre Frage: JQuery-Akkordeon funktioniert ohne h3-Tags nicht .

Es ist ziemlich wichtig, die jQuery-API zu durchlaufen, um Ihr Wissen zu verbessern. Die jQuery-API finden Sie unter http://api.jquery.com/ und die jQuery-Benutzeroberfläche unter http://jqueryui.com/demos/ . Wenn Sie weitere Fragen haben, zögern Sie nicht zu fragen, nachdem Sie versucht haben, Ihr Problem zu lösen, und nachdem Sie einige Nachforschungen angestellt haben.

Wenn all dies Ihre Frage beantwortet hat, markieren Sie sie bitte als richtige Antwort.

— iappwebdev
quelle

Ich habe es getan, das ist was ich habe: // Akkordeon $ ("# Akkordeon"). Akkordeon ({header: "h3"}); $ ("# Akkordeon"). Akkordeon ({zusammenklappbar: wahr}); $ ("# Akkordeon"). Akkordeon ({autoHeight: false, Navigation: true});

— Kim

Das hat funktioniert! Ich danke dir sehr! Wie Sie sehen, lerne ich. Ich weiß es wirklich zu schätzen, dass Sie dabei helfen! Es hat mich verrückt gemacht. Würdest du zufällig wissen, warum der Header "h3" benötigt wird? Ohne wird es nicht richtig funktionieren. Danke noch einmal!

— Kim

Vielen Dank für den API-Link, ich werde das durchsehen. Ich bin mit dem Demo-Link vertraut, von dem ich einen Großteil des Codes erhalten habe. Ich denke, was mich verwirrt hat, ist, dass ich auch Code von dieser Seite genommen habe [ hauppauge.com/jquery/index.html weibl. [1]: hauppauge.com/jquery/index.html von JQuery heruntergeladen und dort verwenden sie das h3 . Ich bin neu in diesem Bereich, werde aber auf jeden Fall die API-Seite durchlesen. Danke noch einmal!

— Kim

Die Option {autoHeight: false} wurde in der API nicht dokumentiert: api.jqueryui.com/accordion Danke!

— Marc Maxmeister

164

du solltest benutzen

$("#accordion").accordion({ 

heightStyle: "content" 

});

Die Höhe wird entsprechend Ihrem Inhalt eingestellt. und verwendet kein Leerzeichen als Höhe.

— Tarun Gupta
quelle

8

Daumen hoch. kurz einfach und das Beste von allem, es funktioniert :)

— Evorlor

5

Danke, habe es versucht autoHeight: false... aber nichts, das hat den Trick gemacht

— Pierre

1

Das ist die beste Antwort! Daumen hoch - ändern Sie die akzeptierte Antwort TA!

— NFlows

1

Solange Sie jQuery UI 1.9 oder höher verwenden, ist dies die beste Antwort, wie das OP in seiner Bearbeitung erwähnt.

— BobRodes

1

Puh, viel Zeit gespart. Vielen Dank. Hat perfekt funktioniert.

— Makarand Mane

15

$("#accordion").accordion({ 

heightStyle: "content" 

});

Dies funktioniert in einer neuen Version, es hat für mich funktioniert !!!

— mithunSalinda
quelle

0

Das hat bei mir funktioniert.

$( ".accordion" ).accordion({ 
 autoHeight: false,
 collapsible: true,
 navigation: true 
 });

— Shweta
quelle

0

Wenn bisher nichts funktioniert, ändern Sie einfach die Größe des jQuery-Akkordeons. contentElementEs wird data-contentstandardmäßig aufgerufen , sofern Sie es nicht anders konfiguriert haben:

$('.accordion').find('[data-content]').resize();

Dies funktioniert auch, wenn Sie die Größe des Akkordeons ändern möchten, nachdem Ihre Daten dynamisch geladen wurden.

— tsveti_iko
quelle