Versuchen Sie ein Drop-Down-Menü mit Javascript und es funktioniert nicht?

Ich bin wirklich neu bei Javascript, aber soweit ich das beurteilen kann, sollte der Code, den ich hier habe, funktionieren. Keine Fehler kommen, wenn ich in der Konsole sehen (es kommt nichts für diese Angelegenheit) und alles, was auf der Website erscheint, ist der Knopf, der nichts tut und die Listenelemente bereits auf der Seite erscheinenVersuchen Sie ein Drop-Down-Menü mit Javascript und es funktioniert nicht?

<html> 
<body> 
<nav> 
<ul> 
    <li> 
    <button class="accordion">Collections</button> 
    <ul class="dropDown"> 
     <li><p>Mojica Lookbook</p></li> 
     <li><p>Andrade Editorial</p></li> 
     <li><p>Bell Videos</p></li> 
    </ul> 
    </li> 
    <li> 
    <a href="shop.html">Shop</a> 
    </li> 
    <li> 
    <a href="stores.html">Stores</a> 
    </li> 
    <li> 
    <a href="contact.html">Contact</a> 
    </li> 
    <li> 
    <img src="mojica_lookbook/mojica_credits.png" class="credits"> 
    </li> 
</ul> 
</nav> 
</body> 

    <script> 

     var dropDown = document.getElementsByClassName("dropDown"); 
     var i = 0; 

     for(i = 0; i < dropDown.length; i++) { 
     dropDown[i].onclick = function(){ 
      this.classList.toggle("active"); 
      this.nextElementSibling.classList.toggle("show"); 
     } 
     } 
     </script> 

    </html>

Quelle

2016-08-04 ashumway

Ich glaube, dass Sie das Element verwenden müssen, das an den Rückruf für den onclick übergeben wird. Anstatt die ‚this‘ Schlüsselwort innerhalb der Callback mit versuchen Sie dies:

for(i = 0; i < dropDown.length; i++) { 
    dropDown[i].onclick = function(e){ 
    e.target.classList.toggle("active"); 
    e.target.nextElementSibling.classList.toggle("show"); 
    } 
}

Es gibt ein paar Beispiele here. Wie für die Schaltfläche haben Sie kein Klickereignis zugeordnet, so dass Sie, wie Sie erklären, nichts tun.

Quelle

2016-08-04 22:17:40

Versuchen Sie ein Drop-Down-Menü mit Javascript und es funktioniert nicht?

Antwort

Verwandte Themen