我正在尝试制作一个弹出菜单,当您将鼠标悬停以显示自身时使用 jquery 动画,然后当您将鼠标移出时它会折叠。我最初是从 hoverIntent 和以下代码开始的:
function collapseMenu() {
$("#myMenu").animate({ "left": "+=50px" }, "slow");
}
function expandMenu() {
$("#myMenu").animate({ "left": "-=50px" }, "slow");
}
$('#myMenu').hover(expandMenu(), collapseMenu());
当我加载页面时,菜单向右移动 50 像素,然后向左移动 50 像素。然后当我真正将鼠标悬停在菜单上时,我收到以下控制台错误
未捕获的类型错误:无法调用未定义的方法“应用”
在 hoverintent.js 的第 69 和 82 行
所以我只是尝试了 jquery 的 .hover 并得到了相同的结果,没有错误。在那之后,我离题了以下测试:
$('#myMenu').mouseenter(alert("mouse entered menu"));
$('#myMenu').mouseleave(alert("mouse left menu"));
现在在页面加载时,我立即收到两个警报……悬停时什么也没有。我已经在 document.ready 和它之外(只是为了好玩)尝试了这些 mouseenter 和 mouseleave 事件,两者都有相同的结果。如果你好奇,这里是我的 html 菜单
<ul id="myMenu" class="nav nav-list">
<li id="lnkHome" class="active"><a href="#">Home</a></li>
<li class="nav-header">Issue Reports</li>
<li id="lnkSoftware" ><a href="#">Software and Apps</a></li>
<li id="lnkOS" class="disabled"><a href="#">Operating Systems</a></li>
</ul>