[débutant] compatibilité FF et IE - display

Version imprimable

Bonjour,

Je cherche à faire une FAQ. Lorsque l'on clique sur une catégorie, cela affiche les questions de celle-ci. J'ai défini deux classes, une visible qui va m'afficher le block ( display:block; ) et une autre invisible qui me cachera le block ( display:none; ).

Le code HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 <h1>FAQ</h1> <ul id="faq"> <li><a href="#" onclick="afficher(this);return false;">+</a> titre2 <ul> <li>Question 2.a</li> <li>Question 2.b</li> <li>Question 2.c</li> </ul> </li> </ul>
Le code JS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function afficher(obj){ mon_ul = obj.parentNode.getElementsByTagName("ul"); if (mon_ul.length>0){ if (mon_ul[0].getAttribute("class")=="visible"){ mon_ul[0].setAttribute("class","invisible"); obj.firstChild.data = "+"; } else { mon_ul[0].setAttribute("class","visible"); obj.firstChild.data = "-"; } } }
Quand je clique sur le "+" se trouvant dans mon tag li, les questions appartenant à la liste s'affichent. Tout est okay sur FF, mais quand arrive IE, là viennent les problèmes. En effet, les questions de la liste ne veulent pas s'afficher lorsque le "+" est sélectionné ...

Quelqu'un aurait-il une solution à ce problème?
Je vous remercie.

bonjour,

Le code est à adapter selon tes besoins, mais je pense qu'il répondra à ta question.

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.conteneur{
 height: 150px;
 width: 200px;
 border: 5px #AAAAAA ridge;
 background-color: #CCCCCC;
 overflow: auto;
 padding: 5px;
}
.clListe{
 display: none;
}
.item{
 cursor: pointer;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var oldObj = null;
function gestionListe(idObj)
{
  var liste = document.getElementById(idObj);
 
  if (oldObj==liste && liste.style.display!="block")
     oldObj = null;
 
  liste.style.display = "block";
 
  if (oldObj!=null)
     oldObj.style.display = "none";
 
  oldObj = liste;
}
 
 
//-->
</script>
 
</head>
 
<body>
<div class="conteneur">
 
<span class="item" onclick="gestionListe('liste1')">Afficher liste 1</span><br>
<ul class="clListe" id="liste1">
<li><a href="page1.htm">Item 1</a></li>
<li><a href="page2.htm">Item 2</a></li>
<li><a href="page3.htm">Item 3</a></li>
</ul>
 
<span class="item" onclick="gestionListe('liste2')">Afficher liste 2</span><br>
<ul  class="clListe" id="liste2">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
 
<span class="item" onclick="gestionListe('liste3')">Afficher liste 3</span><br>
<ul  class="clListe" id="liste3">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
 
</div>
 
</body>
 
</html>

04/06/2007, 22h11
LaseLiep

J'te remercie Auteur, ton code m'a bien aidé.
Pour résoudre le problème, j'ai rajouter une ligne de code dans mon fichier JS :

Code:

mon_ul[0].style.display = "none"

Merci encore ^^
04/06/2007, 23h59
Gatsu35

Citation:

Envoyé par LaseLiep

J'te remercie Auteur, ton code m'a bien aidé.
Pour résoudre le problème, j'ai rajouter une ligne de code dans mon fichier JS :

Code:

mon_ul[0].style.display = "none"

Merci encore ^^

C'est surtout que l'attribut class n'est pas à utiliser mais c'est className.
06/06/2007, 09h42
highman

comme d'habitude !! class marche très bien comme attribut, sauf chez qui ? Internet Explorer !!
06/06/2007, 10h07
Auteur
Citation:

Envoyé par highman

comme d'habitude !! class marche très bien comme attribut, sauf chez qui ? Internet Explorer !!

c'est tellement facile comme explication..... quand on ne cherche pas à comprendre :roll:

remplace :
Code:

1 2 mon_ul[0].setAttribute("class","invisible");
par
Code:

1 2 mon_ul[0].className = "invisible";
et là, ô miracle, ça marche : l'attribut class et reconnu quel que soit le navigateur.

Néanmoins, "visible" comme nom de classe est inaproprié car c'est une valeur de l'attribut visibility (même si je doute qu'il y ait un risque de conflit).