我正在嘲笑一个简单的多级下拉框,无法弄清楚当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();
});
});
答案 0 :(得分:10)
使用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
只会发射一次。
答案 1 :(得分:5)
的 jsFiddle demo 强> 的
只需使用.hover()
另外可防止丑陋的幻灯片累积重复悬停动作
使用:.stop()
$('.dropit li:has("ul")').hover(function() {
$('>ul', this).stop().slideToggle();
});