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

我在列表中有菜单，这是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>

---

谢谢你的帮助

没有必要使用

.each（）

，因为

.mouseleave（）

会像这样自动绑定到每个

li

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

---

您没有明确说明问题所在，但对于初学者来说，您不需要空的

each（）

调用：

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

---

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

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

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);
});​

---

到底是什么问题？：）首先-我无法获得超时效果，其次当我悬停每个li元素时，

.sub\u menu\u main

div将打开所有块

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);
});​