当子元素悬停时，悬停事件会触发两次

Question

我正在设计一个简单的多级下拉框，但无法弄清如何使鼠标悬停事件仅在悬停在

时触发一次。当悬停在列表项内部的标记上时，鼠标悬停事件会触发两次。

以下是演示问题的 jsFiddle 链接。我已经在标记周围添加了额外的填充以显示事件被触发两次。如果只悬停在填充处，事件将触发一次，但一旦悬停在标记上，它将再次触发。

HTML：

<ul class="dropit">
    <li><a href="#">Thing 1</a></li>
    <li><a href="#">Thing 2</a></li>
    <li><a href="#">Thing 3</a>
      <ul>
        <li><a href="#">Sub-thing 1</a></li>
        <li><a href="#">Sub-thing 2</a>
           <ul class='sub-menu'>
            <li><a href="#">Sub-sub-thing 1</a></li>
            <li><a href="#">Sub-sub-thing 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
</ul>

jQuery：

$(document).ready(function(e) {
    $('ul.dropit li').on('mouseover', function(event) {
        $target = $(event.currentTarget);
        $sub = $target.children('ul').first();
        $sub.slideToggle();
    }).on('mouseout', function(event) {
        $target = $(event.currentTarget);
        $target.children('ul').first().slideToggle();
    });
});

jsFiddle demonstration

- Christian Benincasa

Answer 1

使用mouseenter和mouseleave代替mouseover和mouseout

示例代码

$(document).ready(function(e) {
    $('ul.dropit li').on('mouseenter', function(event) {
        $target = $(event.currentTarget);
        $sub = $target.children('ul').first();
        $sub.slideToggle();
    }).on('mouseleave', function(event) {
        $target = $(event.currentTarget);
        $target.children('ul').first().slideToggle();
    });
});​

mouseover 当鼠标悬停在子元素上时触发。

mouseenter 无论有多少个子元素被悬停，都只会触发一次。

- Turnip

Answer 2

jsFiddle演示

只需使用.hover()

而且，为了防止重复的悬停动作导致丑陋的幻灯片堆积，请使用：.stop()

$('.dropit li:has("ul")').hover(function() {
    $('>ul', this).stop().slideToggle();
});

- Roko C. Buljan