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 div，这对于每个li都是deppend并且具有不同的内容。另外，我希望在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

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

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

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

Answer 3

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

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

<强> DEMO

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

3 个答案: