响应式多级导航错误

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");
  }
);