javascript - 具有多个 ID 的菜单切换中断

Question

我有一个菜单可以响应一些媒体查询，这些媒体查询可以调整菜单，因此无论屏幕大小如何，它看起来都不错。该菜单使用一些 JavaScript 创建一个切换按钮，人们可以单击切换按钮在较小的屏幕上查看导航。

所有内容都包含在一个 DIV 中，如果 DIV 有一个 class，我没有问题...如果 DIV 有一个 id，JavaScript 将无法工作.

我不太了解 JavaScript，但它看起来像是在声明一个变量。该变量正在获取 UL 的 id，因此应该没有冲突。有什么我想念的吗？

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 问题...特别是因为如果我将外部 ID 更改为类，一切正常:-)

实例:http://joshrodg.com/site/

感谢任何帮助!

谢谢，
乔希

Answer 1

我基本上刚刚结束使用该类，因为它有效。使用 ID 会很好，但由于它与类一起工作，所以这不是什么大问题。