我遇到的问题涉及汉堡菜单在我的手机上没有响应。但是，当我将浏览器的窗口大小缩小到移动大小窗口时，它确实有效。似乎出了点问题，但我不知道为什么。请注意，我不能使用太多的类或ID，因为这是一个学校项目。
这是我当前的代码
<nav class="navbar">
<a href="index.html">
<img src="images/spotify.svg" alt="Logo van spotify">
</a>
<!-- Gebruik span voor hamburgers bars -->
<a href="#" onclick="myFunction()" class="toggle-button">
<span></span>
<span></span>
<span></span>
</a>
<div id="active" class="navbar-links">
<ul>
<li><a href="premium.html">Premium</a></li>
<li><a href="premium.html">Help</a></li>
<li><a href="premium.html">Downloaden</a></li>
<li><a href="premium.html">Account</a></li>
<li><a href="premium.html">Uitloggen</a></li>
</ul>
</div>
</nav>`
JS代码
`function myFunction () {
document.getElementById("active").classList.toggle("show")
}`
我尝试过什么：
我尝试应用其他 JS，但它破坏了我的代码，主要是一个 JS 似乎可以工作
`function myFunction() {
var x = document.getElementById("active");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
这段代码似乎适用于桌面和我的手机。但是，它使我的导航栏链接完全消失。我无法弄清楚确切的原因。 我对此相当陌生，所以任何帮助将不胜感激。
我的 github 是：https://github.com/Koayz/Spotify-Bryan-van-de-Pol 我的网站也在线：https://mbdehaan.nl/bryan/spotify/
汉堡菜单在三星移动浏览器上对我有用，但在 Chrome 移动浏览器上不起作用，这表明您可能在某个地方有一个不交叉兼容的 CSS 规则。我会再深入研究一下你的 git。
我认为问题是您正在使用空跨度来模拟汉堡菜单。在 Firefox 网页浏览器上，您可以单击"切换按钮"<a>标签上的任意位置，它将触发菜单。在 chrome 网络浏览器上，如果您单击跨度本身，则不会发生任何反应。我认为在移动版本上，跨度是唯一被点击的东西。
我建议用实际的<svg>元素替换汉堡跨度(您可以在网上找到很多免版税的元素(并将该功能附加到该元素，或者将该功能附加到每个跨度以及容器。
默认情况下，nav 元素将进入文档的常规流，因为您尚未指定位置。修复它的一种简单方法是将导航栏的高度指定为 50px，然后将导航栏链接的位置设置为absolute并为其提供 50px 的margin-top。您需要为更大的屏幕视图取消设置此属性。