jQuery Accordéon: les questions d'animation
mise à Jour
je vais faire un wiki de la communauté, et ce pour trois raisons:
- je n'ai pas envie, j'ai obtenu une réponse définitive, mais
- j'ai depuis longtemps cessé d'avoir besoin d'une réponse, parce que j'ai roulé ma propre accordéon fonction
- cette question reçoit des tonnes de points de vue, donc clairement, beaucoup de gens sont toujours intéressés
Donc, si quelqu'un veut modifier/clarifier cette question et d'en faire un guide définitif, mon invité.
je travaille sur une page en utilisant jQuery accordéon élément UI. J'ai modelé mon HTML sur cet exemple, sauf que dans le <li> éléments, j'ai des listes non ordonnées de liens. Comme ceci:
$(document).ready(function() {
$(".ui-accordion-container").accordion(
{active: "a.default", alwaysOpen: true, autoHeight: false}
);
});
<ul class="ui-accordion-container">
<li> <!-- Start accordion section -->
<a href='#' class="accordion-label">A Group of Links</a>
<ul class="linklist">
<li><a href="http://example.com">Example Link</a></li>
<li><a href="http://example.com">Example Link</a></li>
</ul>
<!--and of course there's another group -->
Problème: c'est à dire l'Animation pue
bien que IE7 Anime très bien le menu accordéon de la documentation, il a des problèmes avec le mien. Spécifiquement, un menu accordéon sur la page se déplace saccadé et a des flashs de contenu. je sais que ce n'est pas un problème CSS parce que la même chose se produit si je n'inclus pas mes fichiers CSS.
l'autre menu accordéon de la page ouvre la première section que vous cliquez et, après cela, ne s'ouvre pas.
ces deux problèmes sont spécifiques à IE, et tous les deux disparaissent si j'utilise l'option animated: false. Mais j'aimerais garder la valeur par défaut slide l'animation, puisqu'elle aide l'utilisateur à comprendre ce que fait le menu.
Est-il une autre façon?
16 réponses
je sens ta douleur! Je suis récemment passé par un problème ridicule où j'ai tout déchiré hors de la page principale et la mise en page de la page bloc par bloc (c'était en fait SharePoint), amincissant continuellement en bas de la page.
Le résultat final a fini par être ne pas avoir un doc type pour le document html (certains développeurs l'ont supprimé). L'absence d'un doctype signifiait que IE 7 fonctionnait en mode quirks et que le CSS inline émis par L'Accordéon JQuery se comportait Funky.
Envisager d'ajouter:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
en haut de votre page maître ou document html (s'il n'y a pas déjà un doctype défini).
il y a en fait tout un site dédié au comportement des bizarreries. Vous pouvez consulter un article sur mode bizarreries ici. J' a écrit un post qui contient un peu plus d'informations sur le dépannage.
même problème que tout dans IE7 avec le markup HTML standard bien formé. Ce qui a finalement fonctionné, c'est la suppression de autoHeight: "false" et en utilisant clearStyle: "true".
J'ai aussi créé une version IE < 8 de l'initialisation de l'accordéon avec:
if ( $.browser.msie && $.browser.version < 8 ) {
//ie<8 version
}
else {
//version for the good browsers
}
j'ai en fait évité d'utiliser le plugin accordéon car je l'ai trouvé un peu inflexible pour mes besoins. J'ai trouvé que l'accordéon le plus facile et le plus flexible est aussi simple que:
var accordion = function(toggleEl, accEl) {
toggleEl.click(function() {
accEl.slideToggle(function() { });
return false;
});
}
pour ton exemple que vous pouvez l'utiliser comme ceci:
$(document).ready(function() {
new accordion($("a.accordion-label"), $("ul. linklist"));
});
vous pouvez l'utiliser comme un modèle et construire dans la classe CSS ajouter, callbacks et autres choses utiles, mais j'ai trouvé qu'à la fin il était beaucoup plus facile de le faire de cette façon que de dick autour avec l'accordéon plugin.
EDIT: Exemple de code avec une fonction de rappel
var accordion = function(toggleEl, accEl, callback) {
toggleEl.click(function() {
accEl.slideToggle(callback);
return false;
});
}
$(document).ready(function() {
new accordion($("a.accordion-label"), $("ul. linklist"), function() { /* some callback */ });
});
a Couru dans la même question, mais cette fixe pour IE 6 et 7:
$().ready(function(){
$(".ui-accordion-header").click(function() {
$(this).next().fadeIn();
});
)};
je pense que cela rend la glissade plus agréable de toute façon...
j'ai un problème similaire, et je le corrige en ajoutant ce type de doc. Et cela fonctionne à la fois dans IE et FF
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
changez vos étiquettes d'ancrage en étiquettes de portée. Je rencontrais le même problème et qui a bien fonctionné. Il en va de même pour les étiquettes DIV, C'est-à-dire les trips lorsque ceux-ci sont dans l'accordéon pour une raison quelconque. Position: Absolute may also freak out, fyi
j'utilise JQuery 1.4 et j'ai trouvé
<!DOCTYPE html>
est ok pour IE6, Chrome aussi.
j'ai en fait trouvé l'opposition de Sébastien - j'ai eu min-heights sur les DIVs de contenu interne qui causaient l'animation saccadée. Je les ai enlevées et les choses se sont améliorées. Mais je ne sais pas comment cela interagit avec autoheight - selon la syntaxe, la mienne est définie à "false", mais mon accordéon semble définitivement ignorer cela...
ayant des problèmes similaires, et je remarque que quelques personnes suggèrent de regarder des doctypes.
Je viens d'essayer de voir le site actuel jQuery UI et leur travail de démonstration accordéon très bien dans ie6, suggérant qu'il un problème avec mon code (plus de travail de détective pour moi). Mais je remarque aussi que le jquery.UI sites doctype est tout simplement <!DOCTYPE html>
j'ai expérimenté le même problème et après un certain temps de jouer autour de moi, j'ai découvert que si vous avez un élément contenu à l'intérieur de votre div principal avec positionnement relatif, il va causer à IE d'ouvrir l'accordéon "jerky". Voici ce que je faisais...
<div id="accordion">
<h3 class="oneLine">Asylum</h3>
<div class="serviceBlockContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed augue a enim convallis facilisis. Aenean eu ullamcorper nulla. Ut id urna quis augue bibendum commodo et a quam.</p>
</div>
</div>
j'ai eu la position de l'élément H3 réglée à relative et cela a causé une rupture dans IE. Espérons que cela est utile.
j'avais un problème où le div sous mon entête dans l'accordéon, qui avait un fond blanc sur un fond de page bleue, avait son fond-couleur disparaissant. Parfois, lorsque vous survolez un autre élément d'en-tête, il apparaît; parfois, lorsque vous mettez du texte en surbrillance, il apparaît à nouveau. C'était très étrange et ça N'arrivait qu'en IE7.
appliquer zoom: 1; cibler seulement IE7 sur l'ui - div contenu corrigé cela.
j'espère que ça aide quelqu'un parce que je je viens de passer plusieurs heures à essayer de suivre cela.
Essayez d'utiliser ceci:
{active: "a.default", alwaysOpen: "true", autoHeight: "false"}
au lieu de:
{active: "a.default", alwaysOpen: true, autoHeight: false}
Explorer a des problèmes avec ce genre de syntaxe.
j'ai eu un problème similaire avec un accordéon dans IE6 et IE7 où je n'utilisais pas la structure HTML par défaut pour l'accordéon. Assez étrangement, fixer la taille horizontale des éléments accordéon à un certain nombre de pixels a résolu les problèmes de l'animation accordéon. Pourquoi? Je ne sais pas. Mais j'ai observé que les problèmes étaient spécifiques à l'utilisation de l'autoHeight: true et les problèmes se sont produits à la fin de l'animation où je suppose que la hauteur des éléments de l'accordéon est réinitialisée. Et nous savons tous QU'il ne peut pas faire de maths.
il suffit de changer autoHeight: falseautoHeight: true -- > ça a marché pour moi, mais ce n'était pas ce que je voulais...
Trouver que le fait de mettre min-height pour IE7 résolu le problème.