javascript - jQuery在mouseenter上添加类并在mouseout后500ms将其删除

Question

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

的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/

感谢您的任何回复

Answer 1

演示

使用clearTimeout清除setTimeout

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

    y = 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);
    clearTimeout(y);
    x = setTimeout(function (e2) {
        if (!$(thisItem).children().hasClass('open')) {
            return;
        } else {
            $(thisItem).children().removeClass('open');
        }
    }, 500);
});

Answer 2

您需要清除 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)
});

演示：小提琴

Answer 3

您需要清除超时，以便它们不会触发。 http://jsfiddle.net/5G3BH/14/

var timeoutHandler;
    $('.root li').mouseenter( function( e1 ) {
        var thisItem = $(this);
        clearTimeout(timeoutHandler);    
        timeoutHandler = 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);
        clearTimeout(timeoutHandler);
        timeoutHandler = setTimeout( function( e2 ) {
            if ( !$(thisItem).children().hasClass('open') ) { return; } else {                                  
                $(thisItem).children().removeClass('open'); 
            }
        }, 500 );
    });