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

Question

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

一切都包裹在 DIV 中，如果 DIV 有一个 class，我没有问题...如果 DIV 有一个 [=13] =] 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 和 classes 以压缩此处的内容）：

<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 更改为 class 一切正常:-)

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

感谢任何帮助！

谢谢，
乔什

Answer 1

我基本上只是最终使用了 class 因为它有效。使用 ID 会很好，但由于它与 class 一起使用，所以这不是什么大问题。

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

Menu toggle breaks with multiple IDs

html

javascript

css

menu

toggle