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 下拉菜单.

在线演示在这里（注意这是一个带有关闭按钮的其他代码的分叉演示）：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);
        }
    });
});

小提琴

Answer 2

看看这里：http: //jsfiddle.net/4jEMu/3/

这是你想要的行为吗？

代码

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


        $('#top-nav span').mouseleave(function () {
            timer = setTimeout(function () {
                $('.megamenu').slideUp(200);
                timer = 0;
            }, 1000);
        });
    });

});