当孩子徘徊时,悬停事件发生两次

时间:2012-07-16 19:22:11

标签: jquery html css

我正在嘲笑一个简单的多级下拉框,无法弄清楚当li悬停时如何让悬停事件只触发一次。当列表项中的a标记悬停时,悬停事件将触发两次。

这是一个演示问题的jsFiddle。我在a标记周围添加了额外的填充,以显示事件如何被触发两次。如果仅填充填充,则事件将触发一次,但是一旦a标记悬停,它将再次触发。

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

2 个答案:

答案 0 :(得分:10)

使用mouseentermouseleave代替mouseovermouseout

FIDDLE

$(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只会发射一次。

答案 1 :(得分:5)

jsFiddle demo

只需使用.hover()

另外可防止丑陋的幻灯片累积重复悬停动作 使用:.stop()

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