javascript - 鼠标悬停时 Div 扩展和收缩？

Question

我正在制作一个带有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;
    }
}

请看一下这个jsfiddle

我想将鼠标悬停在菜单图标上以展开，并希望在鼠标离开下拉菜单时收缩。

但是我遇到了鼠标悬停和鼠标移出的问题，您可以在 fiddle 中看到这些问题。

谢谢

Answer 1

您可以使用 jQuery 设置功能，而不是调用函数。为您的图标图像指定类 icon，然后使用以下 jQuery。

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

参见http://jsfiddle.net/hp4jh9f7/4/