Menü toggle bricht mit mehreren IDs

Question

Ich habe ein Menü, reagiert mit einigen Medienabfragen, die das Menü so passt, so dass es unabhängig von der Bildschirmgröße gut aussieht. Das Menü verwendet JavaScript, um eine Umschaltfläche zu erstellen. Benutzer können auf die Umschalttaste klicken, um die Navigation auf kleineren Bildschirmen anzuzeigen.

Alles ist in einem DIV verpackt, wenn der DIV eine class hat, habe ich keine Probleme ... wenn der DIV eine id hat, funktioniert das JavaScript nicht.

Ich weiß nicht viel über JavaScript, aber es sieht so aus, als ob es eine Variable deklariert. Die Variable erhält die id des UL, also sollte es keine Konflikte geben. Gibt es etwas, das mir fehlt?

Das JavaScript:

function myFunction() { 
    var x = document.getElementById("myTopnav"); 
    if (x.className === "topnav") { 
     x.className += " responsive"; 
    } else { 
     x.className = "topnav"; 
    } 
} 

Die HTML (I gezwickt die URLS und Klassen auf die Links, ein bisschen Dinge hier zu kondensieren):

<div id="nav"> 
    <ul class="topnav" id="myTopnav"> 
     <li><a href="http://url.com/">Home</a></li> 
     <li> 
      <a href="http://url.com/">Pictures</a> 
      <ul class="children"> 
       <li><a href="http://url.com/">Beaver</a></li> 
       <li> 
        <a href="http://url.com/">Duck</a> 
        <ul class="children"> 
         <li><a href="http://url.com/">Fever</a></li> 
        </ul> 
       </li> 
       <li><a href="http://url.com/">Frog</a></li> 
      </ul> 
     </li> 
     <li><a href="http://url.com/">Nominations</a></li> 
     <li><a href="http://url.com/">Contact</a></li> 
     <li class="icon"> 
      <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
     </li> 
    </ul> 
</div> 

Ich glaube nicht, dass die CSS ist wichtig, , weil ich mir ziemlich sicher bin, dass dies ein JS-Problem ist ... besonders, wenn ich die äußere ID in eine Klasse ändere:

Beispiel: http://joshrodg.com/site/

Jede Hilfe ist willkommen!

Danke,
Josh

Answer 1

Ich habe im Grunde nur die Klasse verwendet, seit das funktionierte. Es wäre schön gewesen, eine ID zu verwenden, aber da es mit der Klasse funktioniert, ist das keine große Sache.

Answer 2

Ihre Seite verwendet eine Datei nav.css, wo Klasse .nav definiert und alle seine Nachkommen. Ihr Code hat also keine ID #nav Definitionen. Daher funktioniert Ihre Seite nicht, wenn Sie die Klasse in ID ändern.