当用户点击外部时隐藏jQuery UI菜单

Question

我使用jQueryUI菜单作为上下文菜单，因此当用户单击表中的单元格时，它会显示相关选项。问题是，它不是真的被设计成这样使用的，所以当用户点击菜单外时它不会隐藏。

我尝试使用模糊方法：

$("#menu").menu({
    blur: function( event, ui ) {
        $("#menu").css('top', '-1000px');
        $("#menu").css('left', '-1000px');
    }
});

由于某种原因，即使您滚动到菜单中的一个选项上，菜单也会隐藏。

有没有简单的解决办法？

编辑：要拉起我使用的菜单：

$("table.adminScheduleViewer tr td:nth-child(4), table.adminScheduleViewer tr td:nth-child(5), table.adminScheduleViewer tr td:nth-child(6), table.adminScheduleViewer tr td:nth-child(7), table.adminScheduleViewer tr td:nth-child(8), table.adminScheduleViewer tr td:nth-child(9), table.adminScheduleViewer tr td:nth-child(10)").click(function(event){
    $("#menu").css('top', event.pageY);
    $("#menu").css('left', event.pageX);
});

如果我尝试使用$（'body'），它似乎总是首先被调用。单击（）将其隐藏。您可以更改jQuery处理单击的顺序吗？

Answer 1

我用它来隐藏我的jquery-ui菜单，当用户点击菜单之外。

$('body:not(#menu)')
.off('click')
.on( 'click', function() {
    $('body:not(#menu)')
    .off('click');
    $('#menu')
    .hide();
});

与上述答案类似，但隐藏菜单元素，而不是将其移出视口。在调用一次单击句柄以保留其他单击功能后，还将禁用该句柄。

Answer 2

比如说：

           $('body').not($('#menu').find('*'))
             .bind('click',function(){
                $("#menu").css('top', '-1000px');
                $("#menu").css('left', '-1000px');
             });

让我们处理身体上的点击，如果点击发生不在菜单上的任何地方，做你的隐藏。

Answer 3

 $('body:not(#menu)').click(function(){
     $("#menu").css({ 'top' : '-1000px', 'left' : '-1000px' });
 });

我觉得这样更性感一点