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

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

但是我遇到了鼠标悬停和鼠标输出问题，你可以在小提琴中看到。

谢谢

Answer 1

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

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

请参阅http://jsfiddle.net/hp4jh9f7/4/

Answer 2

您应该分别使用onmouseenter和onmouseleave个事件代替onmouseover和onmouseout。

请参阅此fiddler http://jsfiddle.net/hp4jh9f7/2/

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

2 个答案: