Discussion :

[StreetFighter]

Bonjour,

Je suis entrain de réaliser mon menu déroulant pour mon site. Le problème est que je n'arrive pas à sélectionner une class dans mon HTML avec mon JS. En effet, je me suis aidé d'un tuto. J'ai compris le code. J'ai cependant tenté de sélectionner un class grâce à getElementsByClassName mais impossible.

Voici mon code:

HTML:

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
<div id="menu">
    <ul class="menu-content">
        <li>
            <a href="#">accueil</a>
            <ul class="sub-menu">  
                <li> <a href="#"> Test 1 </a> </li>
                <li> <a href="#"> Test 2 </a> </li>
            </ul> 
        </li>
        <li>
            <a href="#">Contact</a>
            <ul class="sub-menu">  
                <li> <a href="#"> Test 1 </a> </li>
                <li> <a href="#"> Test 2 </a> </li>
                <li> <a href="#"> Test 3 </a> </li>
                <li> <a href="#"> Test 4 </a> </li>
                <li> <a href="#"> Test 5 </a> </li>
                <li> <a href="#"> Test 6 </a> </li>
            </ul> 
        </li>
    </ul>
</div>

JS:

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
sfHover = function() {
        var sfEls = document.getElementsByClassName("sub-menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Merci

[freddou17]

Code :

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

document.getElementsByClassName("sub-menu")[idx]

getElementsByClassName renvoie un tableau il te faut préciser l'index

[Bovino]

En même temps, pour ton besoin, getElementsByClassName est moins adéquat que querySelectorAll qui en plus est aussi compatible avec IE8

Code :

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

var sfEls = document.querySelectorAll(".sub-menu li")

Sinon, question compatibilité, ton code est incohérent...
Tu utilises getElementsByClassName qui est compatible IE9+ puis tu testes attachEvent qui n'est compatible que IE alors que addEventListener (la méthode standard) est elle compatible avec tous les navigateurs acceptant getElementsByClassName.