Question

i have menu like this

<ul>
    <li>
        <a href="#">Home</a>
        <ul class="sub">
            <li>Text</li>
            <li>Test</li>
        </ul>
    </li>
    <li>
        <a href="#">About</a>
        <ul class="sub">
            <li>Text</li>
            <li>Test</li>
        </ul>
    </li>
    <li>
        <a href="#">Contact</a>
        <ul class="sub">
            <li>Text</li>
            <li>Test</li>
        </ul>
    </li>   
</ul>

I am using hoverIntent plugin that cause the sub-menu to remain opened for 3 seconds. But i want to close the other opened sub-menu on hovering a main menu. How to close other sub-menus?

here is js code

$('ul > li').hoverIntent({
        over: function(){
            $(this).children('ul').slideDown('slow');
        },
        timeout: 3000,
        out: function(){
            $(this).children('ul').slideUp();
        }
    });

Answer 1

Try this:

$('ul > li').hoverIntent({
    over: function(){

        // slide up all submenus before opening this menu
        $("ul.sub").slideUp();
        $(this).children('ul').slideDown('slow');
    },
    timeout: 3000,
    out: function(){
        $(this).children('ul').slideUp();
    }
});