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?
