javascript - 如何使用 jQuery 在 mouseleave 操作上添加超时

Question

我在列表上有菜单，这是 html：

 <div class="main_menu">
   <ul>
      <li>
        <a href="#" target="_self"><span>Content</span></a>
        <div id="submenu_01" class="sub_menu_main"></div>
      </li>
      <li>
        <a href="#" target="_self"><span>Content</span></a>
        <div id="submenu_02" class="sub_menu_main"></div>
      </li>
   </ul>
 </div>

现在 - 在悬停列表元素时，我需要显示sub_menu_main每个 li 的 div 并且具有不同的内容。此外，我想在 mouseleve 操作上有一些超时，以便将列表的 div 元素更改一段时间保持在室外，而另一个尚未出现。

这是我的功能：

$('.main_menu ul li').mouseenter(function(){
    $('.sub_menu_main').css('display','block');
});
$('.main_menu ul').find('li').each().mouseleave(function(){
    setTimeout(function(){
        $('.sub_menu_main').css('display','none');
    },2000);
});

谢谢帮助。

Answer 1

没有必要，.each()因为.mouseleave()会li像这样自动绑定到每个

$('.main_menu ul').find('li').mouseleave(function(){
   setTimeout(function(){
       $('.sub_menu_main').hide();
   },2000);
});

Answer 2

你可以试试这个，它不漂亮，但也许有人可以帮助清理它：

function getSubMenu(e) {
    var $target = $(e.target);
    var submenu = $target;
    if ($target.is('a') || $target.is('span') || $target.is('li')) {
        var $li = $target.parents('li');
        $submenu = $li.find('.sub_menu_main');
    }
    return $submenu;
}
$('.sub_menu_main').hide();
$('.main_menu ul li').hover(function(e) {
    var $submenu = getSubMenu(e);
    $($submenu).show();
}, function(e) {
    var $submenu = getSubMenu(e);
    setTimeout(function() {
        $($submenu).hide();
    }, 2000);
});​

演示

Answer 3

您还没有确切地说出问题所在，但对于初学者来说，您不需要空调each()用：

$('.main_menu ul').find('li').mouseleave(function() {
    setTimeout(function(){
        $('.sub_menu_main').css('display','none');
    }, 2000);
});

除此之外，它应该可以正常工作。