Question

I have a fairly simple menu:

<ul id="menu">
<!-- TemplateBeginEditable name="mainmenu" -->
    <li><a href="index.htm" title="" class="home">Home</a></li>
    <li><a href="consumers.htm" title="" class="consumers">Consumers</a>
         <ul id="consumer-menu">
            <li> --snip--

and:

    $(document).ready(function() {
        $('.consumers').hover( function() {
            $("#consumer-menu").fadeIn();
        }, function() {
            $("#consumer-menu").fadeOut();
        });
    });

The problem is that when you move your mouse away from <li class=”consumers”.. #consumer-menu dissapears (as it should), I’ve tried using $(‘.consumers, #consumer-menu also but that doesn’t work (you mouse out from #consumer-menu to .consumers and the menu fades out then in again.)

What I think I need is a way to select both .consumers AND all it’s children in one jQuery selector statement, perhaps something like $(‘.consumers > * (but including .consumers).

Thanks for helping!

John.

Answer 1

The simplest answer I can think of given the context is to restructure your HTML like this:

<ul id="menu">
<!-- TemplateBeginEditable name="mainmenu" -->
    <li><a href="index.htm" title="" class="home">Home</a></li>
    <li class="consumers"><a href="consumers.htm" title="">Consumers</a>
         <ul id="consumer-menu">
             <li>test</li>
             <li>test</li>
         </ul>
    </li>
</ul>

which should work out with the jQuery unchanged.

(tested with http://jsfiddle.net/MgbdN/)