Переключатели меню с несколькими идентификаторами

Question

У меня есть меню, которое реагирует на некоторые мультимедийные запросы, которые настраивают меню, чтобы он выглядел хорошо, независимо от размера экрана. Меню использует некоторый JavaScript для создания кнопки переключения, люди могут щелкнуть переключатель, чтобы увидеть навигацию на меньших экранах.

Все обернуто в DIV, если у DIV есть class, у меня нет проблем ... если у DIV есть id, JavaScript не работает.

Я не так много знаю о JavaScript, но похоже, что он объявляет переменную. Переменная получает id UL, поэтому конфликтов не должно быть. Есть что-то, чего я не хватает?

JavaScript:

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

HTML, (я щипнул URLS и классы по ссылкам немного конденсироваться вещи здесь):

<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> 

Я не думаю, что CSS важно , потому что я уверен, что это проблема JS ... особенно потому, что, если я изменю внешний идентификатор на класс, все будет работать :-)

Пример: http://joshrodg.com/site/

Любая помощь приветствуется!

Спасибо,
Джош

Answer 1

В основном я просто использовал класс, так как это сработало. Было бы неплохо использовать идентификатор, но поскольку он работает с классом, это не огромная сделка.

Answer 2

Ваша страница использует файл nav.css, где класс .nav определены и все его потомки. Таким образом, ваш код не имеет определений id #nav. Из-за этого ваша страница «не работает» при изменении класса на id.