打开另一个子菜单关闭子菜单

Question

我在导航中为子菜单制作了一个脚本。当我打开子菜单。 submen是show，当我mouseout时。子菜单关闭宽度延迟300。

但是我的脚本有问题。导航有8个子菜单。当我将鼠标悬停在第一个子菜单上时。这个子菜单是开放的。当我将鼠标悬停在第二个子菜单上时。比我有两个子菜单是开放的。

当我打开一个新的子菜单时。并且还有另一个子菜单。另一个子应该立即关闭。我该怎么做？

非常感谢！

这是我的剧本：

    $('.nav-main .container li').hover(function() {
    if ($(this).find('.submenu').length > 0) {
        $(this).addClass("hover");
        $(this).find('.submenu').show();
    }
}, function() {
    var object = $(this);
    setTimeout(function()
    {
        $(object).find('.submenu').hide();
        $(object).removeClass("hover");
    }, 300);
});

Answer 1

在显示子菜单之前，您可以先隐藏所有子菜单;

if ($(this).find('.submenu').length > 0) {
        $(this).addClass("hover");
        $('.submenu').hide();//Here
        $(this).find('.submenu').show();
    }