javascript - 响应式多级导航错误

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 的类