I'm using mouseenter and mouseleave because when I was trying to
toggle the menus with hover it wasn't working well. On the suggestion
of someone else on this forum I used the bind function to call the
code on the item and it's children.
Now, I just need the top level item to keep it's hover state while the
submenu is extended. Which is where the line of code:
$('li.main-nav').addClass('menu-on');
... came in. Is there no way to incorporate adding that class within
the code as it stands?
On Dec 10, 9:18 am, MorningZ <[EMAIL PROTECTED]> wrote:
> Wow, that code doesn't make much sense
>
> you have the selector "li.main-nav", which i am assuming grabs all 5
> of those top level links
>
> as you hover on each one of them, you reselect all those and add the
> class "menu-on" to them, that wouldn't make sense since you would
> seemingly only want to apply that class to the currently moused-over
> <li>
>
> on top of that, you want to run the same exact code when you enter
> *and* leave the <li>?
>
> $("li.main-nav").hover(
> function() { // Fires when you enter
> $(this).addClass("menu-on").children('div').show
> ();
> },
> function() { // Fires when you leave
> $(this).removeClass("menu-on").children('div').hide
> ();
> }
> );
>
> On Dec 10, 9:11 am, Ted <[EMAIL PROTECTED]> wrote:
>
>
>
> > I'm having trouble having Jquery add a class to a piece of code. I've
> > tried adding the class via "addClass" method, and I've also tried
> > chaining it in to the current Jquery code for mouseenter and
> > mouseleave, but neither is working.
>
> > Here's the Jquery section of the javascript:
>
> > $(document).ready(function(){
> > $("li.main-nav").bind("mouseenter mouseleave",
> > function(){
> > $(this).children('div').toggle();
> >
> > $('li.main-nav').addClass('menu-on');
> > return false;
> > });
> > });
>
> > See full code here:
>
> >http://dl.getdropbox.com/u/21984/navigation.html
>
> > Anybody have any ideas on what I'm doing wrong?
