Mise en page avec JQuery sous ie6
Bonjour,
J'ai fait pour mon site une page qui liste des noms de personnes, avec des informations les concernant.
Mon but est d'afficher pour chaque personne, son numéro de téléphone. A côté de du nom de chaque personne, le visiteur peut cliquer sur une icone qui va faire dérouler tout un paragraphe qui donne des infos plus précise sur cette personne.
Pour cela, j'utilise JQuery, avec le code suivant (dont la structure a été trouvée sur internet, je suis loin d'être un expert en javascript):
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus :
$(".menu_deroulant p.subMenu").hide();
// On sélectionne tous les items de liste portant la classe "toggleSubMenu"
// et on remplace l'élément span qu'ils contiennent par un lien :
$(".menu_deroulant li.toggleSubMenu span").each( function () {
$(this).replaceWith('<a class="expand" href="" title="Afficher les informations détaillées"> </a>') ;
} ) ;
// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".menu_deroulant li.toggleSubMenu > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("p.subMenu:visible").length != 0) {
$(this).next("p.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".menu_deroulant p.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
$(this).next("p.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") });
}
// On empêche le navigateur de suivre le lien :
return false;
});
} ) ;
// -->
</script> |
La liste en html est la suivante:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <ul class="menu_deroulant">
<li class="toggleSubMenu"><strong>Mickael jackson</strong> <span></span>
<p class="subMenu">
Chanteur<br />
Américain<br />
blah blah blah<br />
</p>
<p class="normal">
Tél. 01 02 03 04 05<br />
Email: <a href="mailto:mj@yahoo.fr">mj@yahoo.fr</a><br />
</p>
</li>
<li class="toggleSubMenu"><strong>James Bond</strong><span></span>
<p class="subMenu">
Agent Secret<br />
Anglais<br />
blah blah blah<br />
</p>
<p class="normal">
Tél. 01 02 03 04 06<br />
Email: <a href="mailto:jb@yahoo.fr">jb@yahoo.fr</a><br />
</p>
</li>
</ul> |
Voilà, la liste déroulante fonctionne. Notez que la taille des textes "cachés" sont bien plus grand que dans l'exemple.
Ma page totale est structurée classiquement comme ça:
***** TITRE *****
MENU**CONTENU*
***** PIED *****
Le div CONTENU (dans lequel se trouve la liste) est de hauteur variable (qui varie selon la taille du texte en fait).
Tout fonctionne à merveille sous FF, Opera. Surprenant, le problème est sous IE6. En effet, la liste fonctionne bien, mais IE6 ne veux pas m'afficher le pied de page. Par contre, si je désactive javascript, le pied de page s'affiche correctement (mais ma liste n'est plus déroulante).
En gros, c'est comme si IE6 réserve une hauteur qui correspond à la taille de la liste avec tous les éléments affichés, puis cache les éléments comme voulu (la liste est du coup raccourcie), puis coupe la page au niveau du bas de la liste, sans remonter le pied de page.
J'espère que je suis compréhensible :?
Est-ce que l'un de vous saurait me donner des idées? ça fait un bout de temps que je cherche une solution... :bug:
