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

**LaseLiep** · 03/06/2007, 12h26

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Auteur** · 03/06/2007, 13h47

bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**LaseLiep** · 04/06/2007, 23h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci encore ^^

**Gatsu35** · 05/06/2007, 00h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci encore ^^

C'est surtout que l'attribut class n'est pas à utiliser mais c'est className.

**highman** · 06/06/2007, 10h42

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

**Auteur** · 06/06/2007, 11h07

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

remplace :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

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

JavaScript

Discussions similaires

Partager

Partager