Question

I have created a collapsible menu with stucture like:

• Parent
• Parent 2
• Parent 3
  • Sub category

I have the following javascript

    var config = {
        over: function() { $(this).children('ul').slideDown('slow'); },
        timeout: 5,
        out: function() { }
    }

    $("ul.root-tags li").hoverIntent(config);

    $('ul.root-tags').mouseout(function() {
        $(this).children('li ul').each(function () {
            $(this).slideUp('slow');
        });
    });

Basically I want to open sub categories on hover of the parent item but only collapse opened subcategories on mouseout of the entire list, not just the parent item. My current code does not do this. What changes do I need to make?

jsfiddle is here http://jsfiddle.net/zkhVC/4/

Answer 1

This should address what you are asking for:

$('#head').mouseleave(function() {

    $(this).find('li ul').each(function () {
        $(this).stop().slideUp('slow');
    });

});

$("ul li").mouseenter(function() {
    $(this).children('ul').stop().slideDown('slow');
});​

Fiddle

Here

Explanation

• Do not use hover event, because it will get fired over and over again you are over the element. You want to use mouseenter instead.
• Use mouseleave instead of mouseout:

The mouseleaveevent differs from mouseoutin the way it handles event
bubbling. If mouseout were used in this example, then when the mouse
pointer moved out of the Inner element, the handler would be
triggered. This is usually undesirable behavior. The mouseleaveevent,
on the other hand, only triggers its handler when the mouse leaves the
element it is bound to, not a descendant. So in this example, the
handler is triggered when the mouse leaves the Outer element, but not
the Inner element.

• Take a deeper look at how selectors works: you do not need of the children function here.
• You want to use the stop function before calling an animation to prevent animations buffering.