jQuery在mouseenter上添加類，並在將其移出鼠標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

DEMO

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