web-dev-qa-db-fra.com

JQuery Accordion Auto Height issue

J'utilise JQuery Accordion. J'ai cette page ici: http://www.hauppauge.com/site/support/support_colossus.html#tabs-6

Ce qui se passe, c’est que la hauteur automatique prend un certain temps à se charger, avant qu’elle se charge, il y a beaucoup d’espace blanc au-dessous du contenu. Quand il finit par charger, la hauteur augmentera plus longtemps, puis s'ajustera à la hauteur correcte du contenu. Y a-t-il un moyen pour que cela soit transparent? Je veux juste être capable de cliquer sur un onglet Accordéon et de le développer en douceur jusqu'à la hauteur exacte du contenu.

Mise à jour du 08/08/2014:

Utilisation heightStyle: "content" si vous utilisez version 1.9 et supérieure ( réponse de Tarun )

Utilisation autoHeight: false pour 1.8 et inférieur (réponse de iappwebdev)

jqueryaccordion
74
Kim

Alors pourquoi ne pas simplement définir autoheight sur false?

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

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

[~ # ~] éditer [~ # ~]

En regardant votre commentaire:

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

Vous initialisez l'accordéon et vous ajoutez ensuite plus d'options. Pourquoi faites-vous cela? La valeur par défaut pour autoHeight est true, ainsi chaque onglet a une hauteur fixe. Mettez toutes les options en un seul appel:

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



[~ # ~] éditer [~ # ~]

Concernant votre 2ème commentaire:

Regardez http://jqueryui.com/demos/accordion/#option-header . Vous pouvez voir cette option h3 est défini par défaut, vous n’avez donc pas à le définir dans votre appel.

Et vous obtenez une réponse à votre question ici: L'accordéon JQuery ne fonctionne pas sans les balises h .

Il est très important de passer par l'API jQuery pour améliorer vos connaissances. Pour l'API jQuery, accédez à http://api.jquery.com/ et à l'interface utilisateur jQuery, à http://jqueryui.com/demos/ . Si vous avez d'autres questions, n'hésitez pas à demander après si vous avez essayé de résoudre votre problème et après vous avez fait des recherches.

Si tout cela répond à votre question, veuillez la marquer comme bonne réponse.

56
iappwebdev

tu devrais utiliser

$("#accordion").accordion({ 

heightStyle: "content" 

});

Il va régler la hauteur en fonction de votre contenu. et n'utilisera pas d'espace vide comme hauteur.

155
Tarun Gupta
$("#accordion").accordion({ 

heightStyle: "content" 

});

Cela fonctionne dans la nouvelle version, cela a fonctionné pour moi !!!

11
mithunSalinda

Si rien ne fonctionne jusqu’à présent, redimensionnez simplement jQuery Accordion contentElement - il s’appelle data-content _ par défaut, sauf si vous l'avez configuré différemment:

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

Cela fonctionnerait également si vous souhaitez redimensionner l'accordéon après le chargement dynamique de vos données.

0
tsveti_iko

Cela a fonctionné pour moi.

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