Rendre une liste visible avec Javascript
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 :roll:
La fonction Javascript
Code:
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:
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[]')" /> <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" /> <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" /> <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" /> <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" /> <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...
