响应式多级导航错误

Question

我对 Micah Godbolt 的带有活动父链接的响应式多级导航有一个小问题。它工作得很好，除非页面加载缓慢并且您将鼠标悬停在全局导航上，它有时会显示两个下拉菜单。我猜这是因为 javascript 加载速度不够快。想知道是否有人知道一个简单的解决方法。

这是我使用它的网站：http://library.buffalo.edu

如果您在页面完全加载之前刷新页面并将鼠标悬停在链接上，您会看到问题screenshot of issue

Answer 1

我假设您正在使用 javascript 隐藏下拉菜单，因此您可以在 div 或 css 上添加 style="display: none" 并使用悬停功能。

您还没有发布您的 html，但这里是示例

$(".parent").mouseover(function() {
    $(this).next("ul").show();
});

$(".parent").mouseleave(function() {
    $(this).next("ul").hide();
})

或者您可以用一键功能替换它们并使用 jQuery toggleClass 切换具有display: block 的类

Answer 2

以下功能将起作用。试试这个

   $(".nav-global li").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);