WordPress Drop Down JavaScript jQuery Issue
While building / fixing a few things on the websites new template, I ran across an interesting problem with the drop down menu’s. Originally the menus would drop down once, then wouldn’t drop down again until you refreshed the page.
It took me a few hours to finally pin point the issue, and afterwards I felt like slapping myself in the head.
Here was the original jQuery:
if(!jQuery.browser.msie){// IE – 2nd level Fix
jQuery(” #nav ul “).css({opacity:”0.95″});
}
jQuery(“#nav a”).removeAttr(‘title’);
jQuery(” #nav > li > ul”).css({display: “none”}); // Opera Fix
jQuery(” #nav > li > ul”).parent().find(“a:first”).append(“ “);
jQuery(” #nav ul li > ul”).parent().find(“a:first”).append(“ “);
jQuery(” #nav li”).hover(function(){
jQuery(this).find(‘ul:first:hidden’).css({visibility: “visible”,display: “none”}).show(0);
},function(){
jQuery(this).find(‘ul:first’).css({visibility: “hidden”});
});
}
You see the problem was with how the drop down was hiding after mousing off since originally I was handing it with the .css({visibility: “hidden”});. So I tried to use another native method of hiding with .hide(0), so I replaced:
jQuery(this).find('ul:first').css({visibility: "hidden"});with
jQuery(this).find('ul:first').hide(0);This fixed the drop down issue. So note to self, use the native hide instead of css visibility.
(No Ratings Yet)
Loading ...
Loading ...
