如何在mouseout输出两个元素1秒后关闭一个下拉列表？

Question

我有这种情况，我有2个下拉，这看起来很像，我想要这个：

1. 当我们悬停在第5项时，会出现下拉列表B
2. 当我们从第5项中鼠标输出时，会有超时（1-2）秒触发隐藏下拉列表B的功能
3. 但是如果在超时时间内我们将鼠标悬停在下拉列表B上，那么超时将被重置并且下拉列表B将不会被隐藏

我尝试了这些条件，其中#nested是第5项的ID，＃dropdown2 是下拉B

var closeNestedDropdown = function(){
    $('#dropdown2').hide();
}

$('#nested,#dropdown2').on('mouseover', function(e){
    $('#dropdown2').show();
    clearTimeout(timeout);
});

$('#nested,#dropdown2').on('mouseout', function(e){
     timeout = setTimeout(closeNestedDropdown, 1000);
});

或者请参考这个fiddle，我已经尝试了一些方法，但没有一个工作，但无法弄清楚如何做到这一点。

Answer 1

var closeNestedDropdown = function(){
    $('#dropdown2').hide();
}

$('#nested').on('mouseover', function(e){ //remove the #dropdown2
    $('#dropdown2').show();
    clearTimeout(timeout);
});

$('#nested').on('mouseout', function(e){ //remove the #dropdown2
     timeout = setTimeout(closeNestedDropdown, 1000);
});