Introduce some variable that tracks the current menu state.
$(document).ready(function(){
var menuOn = false;
$("li.main-nav").children('div').hide();
$("li.main-nav").bind("mouseenter mouseleave", function(){
...
});
});
And then, in your bound function check with "if" statement if the menu
is on. If it's off then change to on, plus change the menuOn value to
true. Similar with the "off" case.
I hope I was clear enough.
jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Fri, Jan 9, 2009 at 7:14 PM, Ted <theodorew...@gmail.com> wrote:
>
> 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?
