鼠标快速悬停时 JavaScript 下拉菜单闪烁答案

【问题标题】：JavaScript dropdown menu flickers when moused over quickly鼠标快速悬停时 JavaScript 下拉菜单闪烁
【发布时间】：2017-06-25 03:08:57
【问题描述】：

我创建了一个 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。

【问题讨论】：

您没有为此使用 CSS 有什么原因吗？
我使用了大量的 CSS 来设置这个网站的样式。我没有将它包含在帖子中，因为我认为它不相关。你是说有一种方法可以只用 CSS 制作下拉菜单吗？如果是这样，出于某种原因，这是否更可取？我很想知道如何做到这一点，但我确实想使用 JavaScript 来解决这个问题。我目前的目标是学习 JavaScript。

标签： javascript drop-down-menu toggle mouseover

【解决方案1】：

回答 cmets 中的问题。如果您正在构建一个带有悬停功能的下拉菜单，则最好使用 CSS 来完成，因为它与旧浏览器具有更好的兼容性，并且与尝试使用 javascript 相比，它非常简单，这可能会导致像你一样的烦恼'得到。

这是一个仅使用 CSS 构建的简单下拉菜单

HTML

<ul>
  <li class="dropdown">
    Dropdown
    <ul class="dropdown-menu">
      <li>Sub dropdown</li>
      <li>Sub dropdown</li>
      <li>Sub dropdown</li>
      <li>Sub dropdown</li>
      <li>Sub dropdown</li>
    </ul>
  </li>
</ul>

SCSS

.dropdown {
  &:hover {
    .dropdown-menu {
      display: block
    }
  }
  &-menu {
    display: none
  }
}

小提琴：link

【讨论】：

@jaimerump [link] (stackoverflow.com/questions/11567110/…) 解决了这个问题

【解决方案2】：

对于我的 JavaScript 新手伙伴：

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

但如果您真的希望通过鼠标单击打开下拉菜单，通常的实现方法是使用 JavaScript。同样，在 w3schools 的 Clickable Dropdown 下有一个示例。这是我开始的，但由于他们的示例只显示了一个下拉菜单，而我想要多个菜单，所以我做了一些更改。这可能是我最终遇到闪烁问题的原因。

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

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

【讨论】：