javascript - jQuery在mouseenter上添加类，并在将其移出鼠标500ms后将其删除

我有一个小菜单，想在悬停时将类添加到子菜单项中。检查您将了解的代码：

HTML

<ul class="root">
  <li>Menu1
    <ul class="submenu">
    <li>Menu11</li>
    <li>Menu12</li>
    </ul>
  </li>
  <li>Menu2
    <ul class="submenu">
    <li>Menu21</li>
    <li>Menu22</li>
    </ul>
  </li>
</ul>

JS

$('.root li').mouseenter( function( e1 ) {
    var thisItem = $(this);

    setTimeout( function( e1 ) {

        if ( $(thisItem).children().hasClass('open') ) {
            return;
        } else {
            $(thisItem).children().addClass('open');
            $(thisItem).siblings().children().removeClass('open');
        }

    }, 200 );

}).mouseleave( function( e2 ) {
    var thisItem = $(this);
    setTimeout( function( e2 ) {
        if ( !$(thisItem).children().hasClass('open') ) { return; } else {
            $(thisItem).children().removeClass('open');
        }
    }, 500 );
});

一些CSS

.root li { display: inline-block; background: #eee; color: #333 }
.root li:hover { background: #333; color: #fff }
.submenu li { clear: both }

.root li ul {display: none}
.root li ul.open {display: block}

问题

当将鼠标移出menu12或menu22并重新移入时，在鼠标移出500ms的超时时间内，该子菜单会冒泡且最终关闭。

小提琴

http://jsfiddle.net/5G3BH/12/

感谢您的回复

最佳答案

您需要清除mouseenter和mouseleave上的设置计时器

$('.root li').mouseenter(function (e1) {
    var thisItem = $(this);
    clearTimeout(thisItem.data('hoverTimer'))
    var timer = setTimeout(function (e1) {

        if ($(thisItem).children().hasClass('open')) {
            return;
        } else {
            $(thisItem).children().addClass('open');
            $(thisItem).siblings().children().removeClass('open');
        }

    }, 200);
    thisItem.data('hoverTimer', timer)
}).mouseleave(function (e2) {
    var thisItem = $(this);
    clearTimeout(thisItem.data('hoverTimer'))
    var timer = setTimeout(function (e2) {
        if (!$(thisItem).children().hasClass('open')) {
            return;
        } else {
            $(thisItem).children().removeClass('open');
        }
    }, 500);
    thisItem.data('hoverTimer', timer)
});

演示：Fiddle

关于javascript - jQuery在mouseenter上添加类，并在将其移出鼠标500ms后将其删除，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18514332/