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上的set timer

$('.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

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

jQuery在mouseenter上添加类，并在mouseout后500ms删除它

3 个答案: