javascript - 内部 div 的事件累积外部 div 的事件数

Question

我有一个如下所示的 html 标记:

<div class="student">

    <div class="student-main-image">  
        <div id="student-image-154"><img src="http://goo.gl/5wMt0o"></div>
    </div>

    <div class="student-info">
        Johnna Smith
    </div>

</div>

我想做的就是简单地滑入和滑出包含一些文本的内部 div。如果父容器悬停，则滑入内部 div，否则将其滑出，但如果在主 div 悬停之后立即悬停，则保持内部 div 不显示。

如果父div悬停，我能够完成滑入和滑出内部div，但我无法弄清楚为什么内部div在悬停在父div之后时会不断上下滑动。

我有什么遗漏的吗？

这是我当前的js代码:

$(".student .student-main-image").hover(function () {

    $(this).next().slideDown("fast");
    console.log('in');

}, function(){

    $(this).next().hover(function () {
        $(this).slideDown("fast");
        console.log('in');
    }, function(){
        $(this).slideUp("fast");
        console.log('out');
    }); 

    if($(this).next().is(":visible")) {
        $(this).next().slideUp("fast");
        console.log('hide it');
    } else {
        console.log('nothing to hide');
    }

}); 

fiddle :http://jsfiddle.net/9857R/1/

Answer 1

您需要查看 html 树。当您将鼠标悬停在文本元素上打开文本元素时，您的鼠标将离开图像元素。

这会导致文本向下滑动，将鼠标放回图像元素上，导致文本向上滑动，您就会陷入永久循环。

使用容纳两者的主容器来绑定(bind)事件。由于文本元素包含在主元素中，因此将子元素悬停不会导致问题，因为鼠标从未离开父元素

然后您可以将代码减少为:

$(".student ").hover(function () {          
    $(this).find('.student-info').stop(true,true).slideToggle("fast");    
}); 

stop() 用于防止在动画完成之前再次移动鼠标时事件排队

DEMO