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

Question

我为导航中的子菜单制作了一个脚本。当我打开子菜单时。子菜单显示，当我鼠标悬停时。子菜单关闭宽度延迟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();
    }