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

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

1 个答案: