打開另一個子菜單關閉子菜單

Question

我在導航中爲我的子菜單製作一個腳本。當我打開子菜單。子菜單顯示，當我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(); 
    }