jquery - 鼠标在菜单区域之外超过 n 秒后自动关闭 div

Question

以下列表:

<div id="top-nav">
 <ul>
  <li><span>Products &amp; Services</span>
    <ul>
      <li><div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Support &amp; Training</span>
    <ul>
     <li> <div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Communities</span>
    <ul>
     <li> <div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Store</span>
    <ul>
      <li><div class="megamenu">Content here...</div></li>
    </ul>
  </li>
 </ul>
</div>

通过点击 div 来展开它，代码如下:

$(function(){
    $('#top-nav span').click(function(){
        divTrigger = $('#top-nav span').index(this);
        thisMegaMenu = $('.megamenu:eq('+divTrigger+')');
        $('.megamenu').slideUp(100);
        if(thisMegaMenu.is(":not(':visible')")){
        thisMegaMenu.slideDown(200);
        }
});
});

我想要的是，如果鼠标移出菜单区域超过任意秒数(移出顶部导航 div 区域，或移出当前放置的区域)，div 下拉菜单将关闭下div)。

在线演示在这里(请注意，这是具有关闭按钮的其他代码的 fork 演示):http://jsfiddle.net/KY9gr/ 请注意，我已将此表单编辑为水平菜单。

我是一名 C# 程序员，试图了解 jQuery 示例，因此我感谢您的耐心和指导。

Answer 1

我猜是这样的:

$(function () {
    $('#top-nav').on({
        mouseleave: function(e) {
            $(this).data('timer', setTimeout(function() {
                $('.megamenu').slideUp(200);    
            }, 1000));
        },
        mouseenter: function(e) {
            if ( $(e.target).closest('#top-nav').length ) {
                clearInterval( $(this).data('timer') );
            }
        }
    }).find('span').on('click', function () {
        var divTrigger = $('#top-nav span').index(this),
            thisMegaMenu = $('.megamenu:eq(' + divTrigger + ')');
        $('.megamenu').slideUp(200);
        if (thisMegaMenu.is(":not(':visible')")) {
            thisMegaMenu.slideDown(200);
        }
    });
});

FIDDLE