Jquery QuestionAnswer avec slideToggle

Question

J'ai une simple page de questions et réponses. Lorsqu'un utilisateur clique sur une question, la réponse est affichée avec slideToggle().

Ceci est assez trivial mais je suis bloqué sur Chrome, Safari et Opera mais fonctionne sur Firefox qui est expecatable pour les trois premiers car ils sont exécutés par Webkit et Firefox par Gecko. J'utilise toute la dernière version des navigateurs présentés.

Le code est ce ...

(function() { 
    $('.answer-list').addClass('answer-list-display'); 
    $('.question button').click(function() { 
     $(this).next().slideToggle(300); 
    }); 
}()) 

Il est tout à fait banal et il est censé fonctionner.

J'ai trouvé a similar answer (en fait, le même que le mien) mais si j'utilise visibility:hidden, la hauteur des réponses reste ce qui crée un écart entre les questions. J'ai aussi essayé de le faire en contrôlant height et la fonction animation() mais toujours sans succès.

Tous les navigateurs Webkit affichent la réponse pour la première fois. Mais tous les autres fois, je dois cliquer sur la question trois (!) Fois pour voir la réponse.

Je sais que c'est une question triviale, mais j'ai réellement passé 4 heures de ma vie à essayer de le faire, je n'avais presque pas de sommeil et c'est vraiment frustrant.

J'ai également trouvé un exemple d'un livre que j'ai lu il y a longtemps, Jquery The Missing Manual qui utilise la méthode toggle() avec deux fonctions comme arguments. Toujours pas fonctionné avec les mêmes problèmes dans les navigateurs Webkit.

Merci pour toutes les réponses.

Answer 1

Ok. Voici la réponse.

C'était une erreur de balisage de mon côté. J'ai utilisé une liste non ordonnée. Toutes les questions étaient dans un li et le button était à l'intérieur li. Les réponses étaient dans une liste interne non ordonnée. Lorsqu'un utilisateur clique sur le bouton, la liste interne s'affiche. Cela n'a pas fonctionné. J'ai alors passé à div et p pour les réponses et button pour les questions et tout fonctionne bien. Astuce du jour: N'utilisez aucune liste avec slideToggle, fadeToggle(), toggle() ou toute autre animation avec Jquery. Il semble que c'est trop compliqué pour Jquery de les calculer et j'ai tout essayé. Eh bien, surtout. Qui sait ...