http://jsfiddle.net/nicktheandroid/ppNaX/
这有点理论性。菜单在 mouseenter/mouseleave 上显示/隐藏,如果用户觉得烦人,可以使用切换按钮删除此功能。在我的示例中,我有触发切换的元素,只是显示它而不是实际切换它,但我真正想知道的是,执行此类操作的最佳方法是什么?
有更好的方法吗?自定义 jQuery 事件?使用 .data()
?它可以更高级(愚蠢吗?)?更简单?好处,陷阱?
最佳答案
概念上都是正确的。详情可improved :
var menuWrapper = $('#menuWrapper'),
menu = $('#menu');
var toggleFade = function (toggle) {
menu.stop(true, true);
toggle ? menu.fadeIn() : menu.fadeOut();
};
menuWrapper.bind('mouseenter', function () {
toggleFade(true);
}).bind('mouseleave', function () {
toggleFade(false);
});
$('#showMenu').click(function () {
toggleFade(true);
menuWrapper.unbind('mouseenter').unbind('mouseleave');
});
最重要的是——你需要 stop在运行另一个动画之前播放动画,因为用户可以在菜单动画时进行鼠标悬停,从而导致困惑。
关于javascript - 使用按钮切换可见性来执行此 : Show/hide menu on mouseenter/mouseleave, 的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6955397/