拖放元素时如何停止悬停功能切换？

Question

大家好，我有一个菜单，当鼠标悬停在它上面时会展开，在展开的菜单中我有可以拖放的元素。但是，当您尝试拖动元素时，悬停的菜单会切换回未展开状态，即使您仍在它上方，您能帮帮我吗？

悬停时可展开菜单的 JQuery：

$( ".rightmenucont" ).hover(
    function() {
        $( "#rightmenu"  ).addClass( "expandedmenu" );
    }, function() {
        $( "#rightmenu"  ).removeClass( "expandedmenu" );
    }
);

被拖动项目的Jquery：

$(".menuitem").draggable({ 
    cancel: ".stuck", // clicking an icon won't initiate dragging
    revert: "invalid",
    cursor: "move",
    helper: function() { 
        return $(this).clone().appendTo('body').show();
    }
})

$(".menubar").droppable({
    accept:".menuitem",
    drop: function (ex, ui){
        var droppedItem = $(ui.draggable).clone();
    }
})

任何帮助将不胜感激，我只需要在菜单中拖放元素时菜单保持打开状态，然后在鼠标停止悬停在菜单上时关闭。

Answer 1

一种方法是在您想取消绑定事件处理时使用.off()（jQuery v1.7 的首选方法）或.unbind()：

$('.rightmenucont').off('hover');

或

$(".rightmenucont").unbind('mouseenter mouseleave');

比你想激活它时绑定它，你可以存储你的函数：

var mouseEnterHandler = function() {
    $( "#rightmenu"  ).addClass( "expandedmenu" );
};
var mouseLeaveHandler = function() {
    $( "#rightmenu"  ).removeClass( "expandedmenu" );
};

然后像这样在需要时绑定它：

 $(".rightmenucont").hover(mouseEnterHandler, mouseLeaveHandler);