Question

The title is a little bit messy, so let me try to explain in the actual question:

Suppose I have the following HTML setup.

<div id="userMenu">
    <div id="userMenu-expanderLink">Mouseover here!</div>
    <div id="userMenu-collapserLink">You can close the menu by mouse out.</div>
    <div id="userMenu-expandedContent">Extra Content</div>
</div>

Now, userMenu and userMenu-expanderLink are shown by default. userMenu-expandedContent and userMenu-collapserLink are hidden by default.
What I am trying to do in jQuery is to slideDown the userMenu-expandedContentwhen a mouseover event occurs on userMenu-expander. All good there, this is my code:

$("#userMenu-expanderLink").mouseover(function() {
    $("#userMenu-expandedContent").stop().slideDown(200);
    $("#userMenu-expanderLink").hide();
    $("#userMenu-collapserLink").show();

    $("#userMenu").addClass("userMenu-expanded");
});

As you can see, I’m also hiding the expanderLink and showing the collapserLink; and also adding a class called userMenu-expanded to #userMenu. Until now, this code has no problems. Everything works well.

But now, I want that when the user has a mouseOut event on #userMenu.userMenu-expanded, effectively moving his mouse out of the #userMenu that is expanded, I want when that happens, the expandedContent is slideUp‘d, the expander and collapser links swapped, and the class removed. I know how to do that, but handling the event seems to be a problem.

Putting $("#userMenu.userMenu-expanded")... directly alongside the code I have of course does not work, since a div with such id and such class is only generated if the menu has been expanded, and the div’s class is removed once the menu is collapsed. I don’t directly use a mouseover/mouseout event on one object because I want the collapsing to be triggered only when the user takes his mouse out of the menu, not the expander link.

So, here’s my problem. How can I get such mouse out event? I have tried adding the event handler in the callback of .addClass, but no avail, it would basically permanently close that expanded menu (basically I can’t ever expand it again until I reload the page).

How can this be done? I’m not very experienced with jQuery, so a detailed answer would be most appreciated. I’m more interested on how can this be done rather than just accomplishing it, I want to learn ^_^.

Thanks!

Answer 1

I have found a correct way to do this. This is my final implementation.

$(document).ready(function() {
// UserMenu Expander, which is also a form of drop down
$("#userMenu-expander").mouseenter(function() {
    //alert("Usermenu expanding…");
    $("#userMenu-expandedContent").slideDown(200, function() {
        $("#userMenu").addClass("userMenu-expanded");
    });
    $("#userMenu-expanderLink").hide();
        $("#userMenu-collapserLink").show();
});

$("#userMenu.userMenu-expanded").live('mouseleave', function() {
    //alert("Usermenu de-expanding…");
    $("#userMenu-expandedContent").slideUp(200);
    $("#userMenu-expanderLink").show();
        $("#userMenu-collapserLink").hide();

    $("#userMenu").removeClass("userMenu-expanded");
});
});