jquery this confusion

Question

The below works fine. However, I have 2 submenus - if I hover over either, both of their children "ul.menu_body" fade in.

presumably i need to use "this" somewhere, so the fade only applies to the desired menu.

I tried adding $("ul.menu_body", this).fadeIn('fast') but this stops it working altogether - no errors mind (that i can see)

any ideas? thank you.

    $(document).ready(function(){

           $("ul.menu_body li:even").addClass("alt");
            $("li a.menu_head").hover(function () {
                $("ul.menu_body").fadeIn('fast')
            });
            $(".subMenuParent").mouseleave(function(){
                $("ul.menu_body").fadeOut();
                 $("li.subMenuParent").removeClass("active");

            });
// rest of my script

to clarify - the code below means that every instance of "ul.menu_body" fades in when "li a.menu_head" is hovered.

i just want the relevant sub-menu to be displayed, not all.

Answer 1

You were close, but the hover happens on the anchor element (which becomes this) not the li element. I assume that the ul is not a child of the anchor, but of the li. Try using:

$('ul.menu_body',$(this).closest('li')).fadeIn('fast');

or

$(this).closest('li').find('ul.menu_body').fadeIn('fast');