I've got a full width drop down menu setup, using jquery's toggle to
show/hide the hidden divs when the user clicks on the one of the <li>
elements or any of it's children.
The problem I'm having (and it's kind of hard to reproduce), is that if the
user has their mouse over one of the <li> items while the page is loading,
the toggle becomes confused, and believes that on is off and off is on.
Basically giving you a flickering menu.
Here's my Jquery code:
$(document).ready(function(){
$("li.main-nav").bind("mouseenter mouseleave", function(){
$(this).children('div').toggle();
$(this).toggleClass('menu-on');
return false;
});
});
And the URL of the test case:
http://dl.getdropbox.com/u/21984/menu_test/menu_test.html
I had figured if I told Jquery to hide all of the divs before I introduce
the toggle function that would solve the problem, and tried using a piece of
code that looks like this:
$(document).ready(function(){
$("li.main-nav").children('div').hide();
});
...but that didn't help.
Does anyone have any ideas on how I could fix this?
--
View this message in context:
http://www.nabble.com/Need-help-with-a-Jquery-toggle-bug-in-my-menu%27s-tp21372944s27240p21372944.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
