Javascript 鼠标悬停时的Div伸缩？

我正在制作一个带有jquery动画效果的下拉菜单

var mexpand = false;
function toggleMenu() {
    if (!mexpand) {
        $('jQuery selector').css({ "background": "url('Images/bnbgmenu.jpg') repeat-x top left" });
        $("#NavDiv").animate({ height: "200px" });
        mexpand = true;
    }
    else {
        $("#NavDiv").animate({ height: "35px" });
        $('jQuery selector').css({ "background": "url('Images/bnbguser.jpg') repeat-x top left" });
        mexpand = false;
    }
}

请看一下这个

我想把鼠标悬停在菜单图标上展开，我想在鼠标离开下拉菜单时收缩

但我面临着鼠标器和鼠标器的问题，你们可以在小提琴上看到

---

谢谢

不用调用函数，您可以使用jQuery设置功能。 为您的图标图像提供类

icon

，然后使用以下jQuery

$( ".icon" )
    .mouseenter(function() {
        $("#NavDiv").animate({ height: "200px" });
    }
);
$("#NavDiv")  
    .mouseleave(function() {
        $(this).animate({ height: "35px" });
    }
);

---

请参见您应该分别使用

onmouseenter

和

onmouseleave

事件，而不是

onmouseover

和

onmouseout

---

查看此fiddler

您可能希望从fiddle中删除所有不相关的代码，如

myVar=setInterval（function（））…

，这似乎根本没有任何功能。我想如果你使用showMenu和hideMenu函数而不是toggleMenu，你的生活会更轻松，因为它们在不同的地方被调用。然后从一个简单的例子开始，确保你理解它。你的小提琴包含了很多可能让你困惑的不相关的东西。