Rendre une liste visible avec Javascript

**will89** · 13/08/2008, 12h00

Bonjour, je travaille actuellement sur un moteur de recherche de v�tements. J'ai ue liste de cat�gories , toutes reli�es � des checkboxs pour les activer et � une liste de sous-cat�gories. Je voudrais que quand on coche une cat�gorie, la liste de sous-cat�gories correspondante se d�roule. Voici donc mon code, qui marche sous FF mais pas IE

La fonction Javascript

Code :

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
      function derouleSousCat (ul,checkbox)
      {
        // on masque toutes les listes de sous-catégories
        elem = document.getElementsByClassName('cat_fille');
        for (i=0;i<elem.length;i++) {
          elem[i].style.display = 'none';
        }
        // on coche toutes les sous-catégories concernées
        ch = document.getElementsByName(checkbox)
        for (i=0;i<ch.length;i++) {
          if (!ch[i].checked) ch[i].checked = true;
        }
        // on affiche celle qu'il faut dérouler
        document.getElementById(ul).style.display = 'block';
        // puis on équilibre les hauteurs au cas ou
        var h_gauche = document.getElementById("bloc_gauche_wall").clientHeight;
        var h_centre = document.getElementById("bloc_centre").clientHeight;
        if (h_gauche > h_centre) document.getElementById("bloc_centre").style.height = h_gauche + "px";
        else document.getElementById("bloc_gauche_wall").style.height = h_centre + "px";
      }

Et un bout de ma page HTML (... pour dire qu'il y a d'autres cat�gories construites de la m�me mani�re) :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<ul class="cat_mere">
  <li><input type="checkbox" name="categ_coches[]" id="categ_coches_103" value="103" onchange="derouleSousCat('fille_103','ss_categ_103_coches[]')" />&nbsp;<label for="categ_coches_103">Accessoires</label>
    <ul class="cat_fille" id="fille_103">
      <li><input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_1" value="1" />&nbsp;<label for="ss_categ_coches_1">Bonnets - Gants</label></li>
      <li><input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_2" value="2" />&nbsp;<label for="ss_categ_coches_2">Echarpes - Foulards</label></li>
      <li><input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_3" value="3" />&nbsp;<label for="ss_categ_coches_3">Ceintures</label></li>
      <li><input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_4" value="4" />&nbsp;<label for="ss_categ_coches_4">Gifts</label></li>
    </ul>
  </li>
 
  ......
 
</ul>

PS : je mets l'�v�nement onchange pour g�rer l'appel de ma fonction, mais �a ne devrait pas poser de probl�mes, alors je me dis que peut-�tre c'est la fonction getElementsByClassName qui n'existe pas...

**Auteur** · 13/08/2008, 12h27

Envoy� par will89

PS : je mets l'�v�nement onchange pour g�rer l'appel de ma fonction, mais �a ne devrait pas poser de probl�mes, alors je me dis que peut-�tre c'est la fonction getElementsByClassName qui n'existe pas...

Justement utilise l'�v�nement onclick sur ton input pas onchange (r�serve onchange pour les select). Quant � la m�thode document.getElementsByClassName, elle n'existe pas.
Tu as :
- document.getElementById()
- document.getElementsByTagName()
- document.getElementsByName() � �viter car FF la consid�re comme d�pr�ci�e

**will89** · 13/08/2008, 15h01

J'ai op�r� quelques changements en suivant tes conseils mais le r�sultat n'est pas tr�s probant...

Vous pouvez le voir ici... (nickel sous Firefox, les soucis arrivent avec IE7 et j'ai aps encore test� sur le IE6)

Voici mon nouveau javascript :

Code :

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
      // fonction pour dérouler la liste des sous_catégories
      function derouleSousCat (ul,checkbox)
      {
        // on masque toutes les listes de sous-catégories
        var elem = new Array("fille_103", "fille_3", "fille_25", "fille_30", "fille_102", "fille_34", "fille_12", "fille_13", "fille_112", "fille_15", "fille_16", "fille_17", "fille_9", "fille_21", "fille_22");
        for (i=0;i<elem.length;i++) {
          document.getElementById(elem[i]).style.display = 'none';
        }
        // on coche toutes les sous-catégories concernées
        ch = document.getElementsByName(checkbox)
        for (i=0;i<ch.length;i++) {
          if (!ch[i].checked) ch[i].checked = true;
        }
        // on affiche celle qu'il faut dérouler
        document.getElementById(ul).style.display = 'block';
        // puis on équilibre les hauteurs au cas ou
        var h_gauche = document.getElementById("bloc_gauche_wall").clientHeight;
        var h_centre = document.getElementById("bloc_centre").clientHeight;
        if (h_gauche > h_centre) document.getElementById("bloc_centre").style.height = h_gauche + "px";
        else document.getElementById("bloc_gauche_wall").style.height = h_centre + "px";
      }

et le code HTML n'a pas chang� (simplement gr�ce au PHP, je cr�e un tableau qui contient tous les Id � traiter => le tableau elem dans la fonction JS et j'ai mis onclick au lieu de onchange pour appeler la fonction mais �a ne change pas grand chose)

**Katachana** · 13/08/2008, 15h38

Il me semble que

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

'block'

ne marche pas sous IE

Essaye comme cela :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
// on affiche celle qu'il faut dérouler
//IE
		if(document.all){
        document.getElementById(ul).style.display = "";
} else {
document.getElementById(ul).style.display = "block";
}

**Auteur** · 13/08/2008, 15h48

je te propose une variante :

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<style type="text/css">
<!--
.cat_fille{
  display: none;
}
-->
</style>
 
 
<script type="text/javascript">
<!--
function derouleSousCat(listeFille,chkParent)
{
  var liste = document.getElementById(listeFille);
  var listeChk = liste.getElementsByTagName("input"); // tous les input de la liste fille sélectionnée
  var i;
  
  if (chkParent.checked)  // input parent coché ?
  {
    liste.style.display = "block";
  }
  else
  {
    liste.style.display = "none";
  }
  
  for (i=0; i<listeChk.length; i++)
  {
    listeChk[i].checked = chkParent.checked;  // les input de la liste fille prennent le même statut que le parent
  }
  
}
//-->
</script>
 
</head>
 
<body>
 
<ul class="cat_mere">
  <li>
    <input type="checkbox" name="categ_coches[]" id="categ_coches_103" value="103" onclick="derouleSousCat('fille_103', this)" />&nbsp;<label for="categ_coches_103">Accessoires</label>
    <ul class="cat_fille" id="fille_103">
      <li>
        <input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_1" value="1" />&nbsp;<label for="ss_categ_coches_1">Bonnets - Gants</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_2" value="2" />&nbsp;<label for="ss_categ_coches_2">Echarpes - Foulards</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_3" value="3" />&nbsp;<label for="ss_categ_coches_3">Ceintures</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_4" value="4" />&nbsp;<label for="ss_categ_coches_4">Gifts</label>
      </li>
    </ul>
  </li>
 
  <li>
    <input type="checkbox" name="categ_coches[]" id="categ_coches_3" value="3" onclick="derouleSousCat('fille_3',this)" />&nbsp;<label for="categ_coches_3">Bijoux</label>
    <ul class="cat_fille" id="fille_3">
      <li>
        <input type="checkbox" name="ss_categ_3_coches[]" id="ss_categ_coches_5" value="5" />&nbsp;<label for="ss_categ_coches_5">Boucles d'oreilles</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_3_coches[]" id="ss_categ_coches_6" value="6" />&nbsp;<label for="ss_categ_coches_6">Bracelets</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_3_coches[]" id="ss_categ_coches_7" value="7" />&nbsp;<label for="ss_categ_coches_7">Colliers - Sautoirs</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_3_coches[]" id="ss_categ_coches_8" value="8" />&nbsp;<label for="ss_categ_coches_8">Divers</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_3_coches[]" id="ss_categ_coches_64" value="64" />&nbsp;<label for="ss_categ_coches_64">Bagues</label>
      </li>
    </ul>
  </li>
 
  <li>
    <input type="checkbox" name="categ_coches[]" id="categ_coches_25" value="25" onclick="derouleSousCat('fille_25', this)" />&nbsp;<label for="categ_coches_25">Blouses</label>
    <ul class="cat_fille" id="fille_25">
      <li>
        <input type="checkbox" name="ss_categ_25_coches[]" id="ss_categ_coches_9" value="9" />&nbsp;<label for="ss_categ_coches_9">Courtes</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_25_coches[]" id="ss_categ_coches_10" value="10" />&nbsp;<label for="ss_categ_coches_10">Longues</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_25_coches[]" id="ss_categ_coches_11" value="11" />&nbsp;<label for="ss_categ_coches_11">Imprimées</label>
      </li>
    </ul>
  </li>
 
  <li>
    <input type="checkbox" name="categ_coches[]" id="categ_coches_30" value="30" onclick="derouleSousCat('fille_30',this)" />&nbsp;<label for="categ_coches_30">Caleçons</label>
    <ul class="cat_fille" id="fille_30">
      <li>
        <input type="checkbox" name="ss_categ_30_coches[]" id="ss_categ_coches_12" value="12" />&nbsp;<label for="ss_categ_coches_12">Collants</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_30_coches[]" id="ss_categ_coches_13" value="13" />&nbsp;<label for="ss_categ_coches_13">Leggings courts</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_30_coches[]" id="ss_categ_coches_14" value="14" />&nbsp;<label for="ss_categ_coches_14">Leggings longs</label>
      </li>
    </ul>
  </li>
 
</ul>
 
 
</body>
</html>

Explications :
Le second param�tre de ta fonction

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

derouleSousCat(ul,checkbox)

n'est plus le name des checkbox de ta liste � d�rouler, mais l'input qui appelle la fonction (d�sign� par le mot-clef this):

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
<input type="checkbox" name="categ_coches[]" id="categ_coches_103" value="103" onclick="derouleSousCat('fille_103', this)" />&nbsp;<label for="categ_coches_103">Accessoires</label>

Le premier param�tre est toujours l'id de la liste � d�rouler.

Puis dans la fonction je recherche tous les input de la liste enfant � afficher :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
 
var liste = document.getElementById(listeFille);
  var listeChk = liste.getElementsByTagName("input"); // tous les input de la liste fille sélectionnée

Puis je r�alise une boucle qui coche ou d�coche tous les input de la liste enfant en fonction du statut de l'input qui a appel� la fonction :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
 for (i=0; i<listeChk.length; i++)
  {
    listeChk[i].checked = chkParent.checked;  // les input de la liste fille prennent le même statut que le parent
  }

**will89** · 13/08/2008, 16h37

Pinaise, ce code est nickel... Je l'ai repris, simplement j'y ai rajout� la disparition de toutes les listes filles au d�but de la fonction...

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 derouleSousCat(listeFille,chkParent)
      {
      // on récupère les éléments nécessaires
        var liste = document.getElementById(listeFille);
        var listeChk = liste.getElementsByTagName("input"); // tous les input de la liste fille sélectionnée
      // on masque toutes les listes de sous-catégories
        var elem = new Array("fille_103", "fille_3", "fille_25", "fille_30", "fille_102", "fille_34", "fille_12", "fille_13", "fille_112", "fille_15", "fille_16", "fille_17", "fille_9", "fille_21", "fille_22"); // tableau généré par PHP
        for (var i=0;i<elem.length;i++) document.getElementById(elem[i]).style.display = 'none';
      // on affiche la liste fille qu'il faut dérouler ou on la replie selon l'état de la checkbox mère
        if (chkParent.checked) liste.style.display = "block";
        else liste.style.display = "none";
      // les input de la liste fille prennent le même statut que la checkbox mère
        for (i=0; i<listeChk.length; i++) listeChk[i].checked = chkParent.checked;
      }

**will89** · 13/08/2008, 15h48

Autant pour moi... J'avais encore le onchange, en passant � onclick IE r�agis beaucoup mieux...

Quand au display:block ,il passe tr�s bien sous IE...

Merci � vous..

Rendre une liste visible avec Javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager