我正在设计一个简单的多级下拉框,但无法弄清如何使鼠标悬停事件仅在悬停在
以下是演示问题的 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();
});
});