响应式多级导航错误

Question

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

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

如果在页面完全加载之前刷新页面并将鼠标悬停在链接上，则会看到问题的问题屏幕截图

Answer 1

我假设你正在使用javascript隐藏你的下拉菜单，这样你就可以在divs或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");
}
);