7
votes

JQuery accordéon hauteur: 100%

Je cherche à créer un site Web de style accordéon avec 3 éléments de menu remplissant 100% de la fenêtre lors de leur élargissement. Je peux trouver beaucoup d'accordées différentes, mais aucun qui fonctionne correctement avec la hauteur: 100%

Des idées?

Voici la mise en page générale:

http://i.imgur.com/glytx.jpg

http://i.imgur.com/houro.jpg

jquery accordion height

0 commentaires

5 Réponses :

8
votes

Vous pouvez le faire avec jQuery ui accordéon ( Démo ):

CSS p> xxx pré>

script p> xxx pré>

pour les versions plus récentes de jQuery ui accordéon (v1.12.1 +), définissez le Highstylele code> à remplir code>, utilisez "Actualiser" pour mettre à jour et em> Définir la hauteur HTML et le corps à 100% ( Démo ). P>

CSS P>

$(".accordion").accordion({
  heightStyle: "fill"
});

$(window).resize(function() {
  // update accordion height
  $(".accordion").accordion("refresh");
});

0 commentaires

29
votes

jQuery( "#accordion" ).accordion( "resize" );

0 commentaires

1
votes

Dans certaines versions Highstyle: "Contenu" Strong> ne fonctionne pas, car jquery.ui.js em> strong> n'est pas la variable "Highstyle", Donc, vous pouvez définir une variable par défaut manuellement dans le jquery.ui.js em> strud>.

Recherche en code: p>

$.extend( prototype.options, {
    heightStyle: "content", // remove default so we fall back to old values
    ...
    .. some code ..
    ...
});

0 commentaires

0
votes

J'ai eu le même problème et: xxx

corrigé, pas besoin de plus de JavaScript.

0 commentaires

2
votes

J'utilise 1.8.21 de JQuery-UI et Heightstyle: "Contenu" n'a pas fonctionné pour moi. J'ai lu via le code et j'ai trouvé la solution suivante:

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

0 commentaires