我使用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);
});
如果我尝试使用$('body'),那么似乎总是先被调用。单击()隐藏它。你能改变jQuery处理点击的顺序吗?
答案 0 :(得分:3)
如下:
$('body').not($('#menu').find('*'))
.bind('click',function(){
$("#menu").css('top', '-1000px');
$("#menu").css('left', '-1000px');
});
让我们处理身体上的点击,如果点击发生在菜单上的任何地方,请隐藏。
答案 1 :(得分:3)
$('body:not(#menu)').click(function(){
$("#menu").css({ 'top' : '-1000px', 'left' : '-1000px' });
});
我认为这种方式有点性感
答案 2 :(得分:2)
当用户点击菜单外部时,我用这个来隐藏我的jquery-ui菜单。
$('body:not(#menu)')
.off('click')
.on( 'click', function() {
$('body:not(#menu)')
.off('click');
$('#menu')
.hide();
});
与上述答案类似,但隐藏了菜单元素,而不是将它们移出视口。在调用一次后,还会禁用单击手柄以保留其他单击功能。