响应式多级导航错误

Question

I have a small issue with Micah Godbolt's Responsive Multi-level Navigation with active parent links . It works great, except if the page loads slowly and you are hovering over the global nav, it can sometimes show two dropdowns. I'm guessing this is cause the javascript is not loading quick enough. Was wondering if anybody knew of an easy fix.

Here is the site I am using it on : http://library.buffalo.edu

If you refresh the page and hover over the links before the page fully loads, you see the problem screenshot of issue

Answer 1

I assume you are hiding your dropdowns with javascript so you could add style="display: none" on your divs or css and use hover function.

you havent post your html but here's example

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

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

or you can replace those with one click function and use jQuery toggleClass to toggle a class that have display: block on it

Answer 2

Below function will work. Try this

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