Question

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

如果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（我在链接上调整了URL和类，以便在这里压缩一些东西）：

<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本来不错，但由于它正在使用该类，因此并不是一件大事。

菜单切换中断多个ID

1 个答案: