我正在模拟一个简单的多级下拉框,无法弄清楚如何让悬停事件仅在 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();
});
});
最佳答案
使用 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
只触发一次,无论有多少 child 悬停。
关于jquery - 当 child 悬停时,悬停事件会触发两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11511085/