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

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

我尝试使用模糊方法：

$("#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); 
});

似乎总是先被称为如果我尝试使用$（“身体”）点击（）来隐藏它。你可以改变命令jQuery处理点击？

来源

2013-02-27 Luke Sapan

http://stackoverflow.com/questions/2868582/click-outside-menu-to-close-in-jquery的副本？ – 2015-05-05 17:30:34

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

我觉得这种方式有点性感

来源

2013-02-27 20:41:05

我已经想出了一个类似的解决方案，但它不起作用。因为我使用$（“td”）。click（）将屏幕上方和左方的位置更改为屏幕，所以看起来td的点击首先被调用，然后是body：没有人立即隐藏它。 – 2013-02-27 21:46:53

我不知道为什么我没有想到使用event.stopPropagation（）。没关系，谢谢！ – 2013-02-27 21:57:15

这是否将一个事件监听器添加到不是菜单的BODY的每个孩子？我没有发现那种性感，只是混杂：p – 2015-05-05 17:06:59

怎么是这样的：

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

让我们在身体上处理点击，如果点击发生的菜单上没有任何地方，做你的躲了起来。

来源

2013-02-27 20:23:23

更改.bind（）到on（） – 2013-02-27 20:25:45

正确。我目前正在使用jQuery的老版本，所以我的想法是在可用性设置..所以如果你有最新的jQuery，请使用.on - 谢谢斯科特。 – 2013-02-27 20:28:37

正如我对@ScottSelby所说的，我想出了一个类似的解决方案，但它不起作用。因为我使用$（“td”）。click（）将屏幕上方和左方的位置更改为屏幕，所以似乎td的点击首先被调用，然后主体立即隐藏它。 – 2013-02-27 21:47:24

我使用这个隐藏我的jQuery的UI菜单，当用户点击菜单之外。

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

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

来源

2014-02-10 18:28:19 wolfstevent

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

回答

相关问题