最好的方法是什么：在鼠标输入/鼠标离开时显示/隐藏菜单，并带有一个按钮来切换可见性？

Question

http://jsfiddle.net/nicktheandroid/ppNaX/

这在一定程度上是理论性的。菜单在mouseenter/mouseleve上显示/隐藏，如果用户觉得这很烦人，可以通过切换按钮删除此功能。在我的例子中，我有一个触发切换的元素，只是显示它，而不是实际切换它，但我真正想知道的是，做这样的事情的最佳方式是什么？

有更好的方法吗？自定义jQuery事件？使用.data()？它能更高级吗(愚蠢？(？更简单？好处，陷阱？

Answer 1

概念上都是正确的。细节可以改进：

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');
});

最重要的是，在运行另一个动画之前，您需要停止动画，因为用户可以在菜单设置动画时进行鼠标悬停，从而导致混乱。