Question

我创建了一个JavaScript下拉菜单，但在Safari和Chrome中快速浏览时，它会以一种小故障方式闪烁。这不是Firefox的问题。

我看过这个问题的帖子讨论了悬停时父母/孩子的问题或麻烦，但我不确定它们是否适用。我是JavaScript的新手，这是我写过的第一个代码，所以我真的不明白这些反应。

这是一个水平菜单，每个栏都有这样的HTML ......

<li>
<a href="#" id="dropMenu3" class="dropMenu" onclick="dropDown3()">Creations</a>
    <div id="dropDiv3" class="dropDiv bar3" onmouseout="hideDiv3()">
    <a href="#">Creations</a>
    <a href="#">Cordie-bot</a>
    <a href="#">Infinity Clock</a>
    <a href="#">Steampunk Hat</a>
    <a href="#">Birdfeeder</a>
    </div>
</li>

像这样的JavaScript ......

function dropDown3() {
    document.getElementById("dropDiv1").classList.remove("show");
    document.getElementById("dropDiv2").classList.remove("show");
    document.getElementById("dropDiv3").classList.toggle("show");
    document.getElementById("dropDiv4").classList.remove("show");
    document.getElementById("dropDiv5").classList.remove("show");
}
function hideDiv3(){
    document.getElementById("dropDiv3").classList.toggle("show");
}

当它显示时，每个div位于其菜单栏的顶部，鼠标输出也在顶部工作，但在设置之前我也遇到了闪烁问题。

我确信有更好的方法可以对此进行编码，但我认为它没有任何严重错误。它除了闪烁之外还可以正常工作。如果有办法解决它，请告诉我。请保持简单。我是新手。另外，我不使用jQuery。

Answer 1

对于我的JavaScript新手：

要回答我自己的问题，摆脱这种毛刺闪烁的最简单方法是不使用JavaScript。简单的解决方案是只使用CSS并在将鼠标悬停在菜单上时打开菜单。在CSS下拉菜单中有一个w3schools的例子。 Baruch提供的答案实际上使用的是SCSS，它不仅仅是CSS，而且可能不是为Web开发提供新手的最佳示例。

但是，如果您真的希望通过鼠标单击打开下拉菜单，通常的方法是使用JavaScript。再次，在Clickable Dropdown下的w3schools有一个例子。这是我的开始，但由于他们的例子只显示一个下拉菜单，我想要多个菜单，我做了几处更改。这可能是我最终解决闪烁问题的原因。

现在，jaimerump确实找到了一种方法来修复闪烁，我在之前的评论中链接到了闪烁，但代码使用的是jQuery，它本身不是JavaScript，它实际上是外部JavaScript文件中的JavaScript代码库。因此，如果您想使用该代码，则需要将页面链接到jQuery。

我将弄清楚如何使用JavaScript最终解决这个问题，但是现在我正在采用简单的方法并使用CSS和悬停。

当快速移动时，JavaScript下拉菜单会闪烁

1 个答案: