大家好,我想知道如何在子菜单中移动鼠标时保持父菜单的悬停。
我是jQuery的初学者,我希望你能帮我提一些建议。
jQuery代码
// Navigation Slide //
var navHover = function () {
$("#S" + this.id).animate({top: '-40px'}, 300, 'swing')
$(this).animate({paddingTop: '30px'}, 300, 'swing').animate({paddingTop: '45px'}, 300, 'swing')
$("#I" + this.id).animate({top: '-10px'}, 300, 'swing').animate({top: '0px'}, 300, 'swing')
}
var navRelease = function () {
$("#S" + this.id).animate({top: '-130px'}, 300, 'swing');
}
$('#navInside a.topLevel').hover(navHover, navRelease);
// Dropdown animation
function mainmenu(){
jQuery(" #navInside ul ").css({display: "none"}); // Opera Fix
jQuery(" #navInside li").hover(function(){
jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(500);
},function(){
jQuery(this).find('ul:first').css({visibility: "hidden"});
});
}
jQuery(document).ready(function(){
mainmenu();
});
导航HTML
<div id="navInside">
<li><a class="topLevel" href="">Home</a></li>
<li><a class="topLevel" href="">Options</a>
<ul>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
</ul>
</li>
<li><a class="topLevel" href="">Thanks</a></li>
答案 0 :(得分:1)
问题是您的顶级悬停在&lt; a&gt;上了。元件。移动到子菜单会导致在&lt; a&gt;上触发mouseleave事件。因为子菜单元素不是&lt; a&gt;的子元素,而是&lt; li&gt;的子元素。试试这个:
$('#navInside a.topLevel').parent().hover(navHover, navRelease);
BTW - 您可以使用悬停功能中的$(this)来简化navHover / navRelease代码。这样,您不需要元素上的特定ID。你只需要找到它们相对于当前元素。
答案 1 :(得分:0)
你根本不需要JS。以下是jsFiddle的解释:
您希望仅在您将鼠标悬停在ul
上时显示li
的子项。这由li ul
(mouseout状态)和li:hover ul
(鼠标悬停状态)处理。
当您将鼠标悬停在它上面时,LI的高度会发生变化,因为您现在也在显示UL,因此只要您不离开其(LIs)区域(包括其文本+),它就会保持可见状态UL)。
如果您想要一些动画,请查看CSS过渡。浏览器支持很不稳定,但也许你正在尝试做的事情将得到普遍支持。准确判断区域正在变化的元素上的鼠标悬停/输出事件可能会非常棘手。我建议只在真的需要这样的东西时使用JS。