关闭其他子菜单

Question

我有这样的菜单

<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>

我正在使用 hoverIntent 插件导致子菜单保持打开 3 秒。但我想在悬停主菜单时关闭另一个打开的子菜单。如何关闭其他子菜单？

这里是js代码

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

Answer 1

试试这个：

$('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();
    }
});