et les questions effondrement

Question

Je suis un concepteur de recrue ayant quelques problèmes avec cette page: http://www.resolvegroup.co.nz/javasurvey.php

Il y a des problèmes avec le fonctionnement javascript des questions élargies. Pour Internet Explorer (Version 7), la première question, lorsqu'elle est développée, est partiellement masquée à la question 2. Cela se produit à des degrés divers avec toutes les questions, rendant parfois la question suivante complètement cachée et d'autres problèmes.

Firefox (Version 3.03) n'a pas le problème ci-dessus, mais vous ne pouvez pas accéder aux explications ou sélectionner la question suivante comme dans IE7.

Est-ce que quelqu'un sait ce qu'il se passe et comment y remédier?

Answer 1

Si je ne me trompe pas, votre CSS a un peu perdu. ".question-container h3" et ".question-container h3 span" ont un positionnement relatif et absolu, respectivement. Internet Explorer ne gère pas très bien le positionnement hors flux. En résultat, il devient confus et essaie de placer ces éléments dans des endroits étranges.

Construire l'accordéon sans positionnement relatif ou absolu et il devrait fonctionner correctement.

Answer 2

Je recommande regarder en utilisant un script d'accordéon pré-construit, comme celui construit dans la bibliothèque jQuery UI: http://docs.jquery.com/UI/Accordion

---

En outre, il y a quelques choses que je pourrais suggérer. Ce code de la vôtre:

$(".score-list").slideUp(speed); 
$(".score-list").removeClass("open"); 
$("a.open-answer").removeClass("hidden"); 
$(this).parent().children(".score-list").slideDown(speed); 
$(this).parent().children(".score-list").toggleClass("open"); 
$(this).toggleClass("hidden"); 

pourrait être beaucoup plus efficace en stockant les résultats d'une requête jQuery, ainsi que tirer profit des capacités d'enchaînement de jQuery: tout à fait un grand nombre de fonctions de jQuery retourner le même objet jQuery, ce qui signifie que vous pouvez appeler un certain nombre de fonctions dans une rangée sans avoir à référencer l'objet encore et encore. Voici ce que je veux dire:

$(".score-list")  // my own preference is to split the calls onto 
    .slideUp(speed)  // multiple lines to make it easier to read. 
    .removeClass("open") 
; 
$("a.open-answer").removeClass("hidden"); 

var $this = $(this); // store the result from a query in an object so you 
         // don't have to go through that again. 
$this 
    .parent() 
    .children(".score-list") 
    .slideDown(speed); 
    .toggleClass("open") 
; 
$this.toggleClass("hidden");