单击其他任何地方时如何隐藏jquery ui菜单？答案

【问题标题】：How to hide a jquery ui menu when clicked anywhere else?单击其他任何地方时如何隐藏jquery ui菜单？
【发布时间】：2012-12-14 07:48:54
【问题描述】：

我正在尝试实现一个 jquery-ui 菜单，该菜单在单击对象时出现，但在单击菜单本身以外的任何位置时消失。

这是我目前的代码：

$("div.item").click(function(e){
        $( "#menu" ).menu( );
        $("#menu").css("top",e.pageY);
        $("#menu").css("left",e.pageX);
        
       });

现在，如果在菜单本身以外的任何地方单击，我想隐藏并销毁菜单。

【问题讨论】：

标签： jquery jquery-ui onclicklistener jquery-events jquery-ui-menu

【解决方案1】：

您想使用 blur 事件，该事件会在对象失去焦点时触发。点击其他东西会转移焦点。

$("#menu").blur(function () {
    // Your code here to either hide the menu (.toggle())
    // or remove it completely (.remove()).
});

【讨论】：

不能让它工作，由于某种原因，只有当我第一次单击“#menu”中的一个项目并单击屏幕上的其他位置时才会调用事件。
实际上让它工作..我只需要做 $("#menu").focus();单击它是因为单击 div 并显示菜单时，焦点不在菜单上。感谢您的解释，因为它帮助我弄清楚了:) ..

【解决方案2】：

上面的代码和评论只是为了坦克（@death-relic0，@levi-botelho）

// create
$('#menu').blur(function() {
    $('#menu').hide();
});

// show
$('#menu').show().focus();

【讨论】：

【解决方案3】：

我在使用 JQuery UI selectmenu 小部件时遇到了同样的问题，因为我没有导入 JQuery UI selectmenu css 文件，所以出现了这个问题。我选择不这样做是因为我想自己设置选择菜单的样式。

为了解决这个问题，我将[aria-hidden="true"] { display: none; } 添加到我自己的css 中，当我尝试解决这个问题时，我注意到这个 aria 属性在true 和false 之间切换。

【讨论】：

【解决方案4】：

您好，这是我们在 Oodles Technologies 中遵循的隐藏 jquery datepicker 的过程。

我们的模态的基本结构如下所示。

<button class="btn btn-info btn-lg" data-target="#myModal" data-toggle="modal" type="button">Open Modal</button>

这是我们的基本 CSS，用于定义高度模式。

.modal-body {
    min-height: 500px;
    max-height: 500px;
    overflow: auto;
}

$(".modal-body").scroll(function(){
    $("#ui-datepicker-div").hide();
});

希望对你有帮助

【讨论】：

【解决方案5】：

来自@Levi Botelho Ans 和@Ahmed-Anas cmets，我在第一次创建小部件时使其更具可重用性。像这样的：

const handleClickedOutside = function (e, ui) {
            var self = $(this);
            $("ui-selectmenu-menu").focus()
                .blur(function (event) {
                    self.selectmenu('close');
                });
        };

$("#first").selectmenu({
     change: ..,
     position: { .. },
     open: handleClickedOutside
});

$("#second").selectmenu({
     change: ..,
     position: { .. },
     open: handleClickedOutside
});

【讨论】：

【解决方案6】：

jQueryUI 1.9 版中的模糊事件似乎有问题（在获取菜单项焦点时错误生成！）

我的解决方案：（#jQueryMenu 代表我的菜单的第一个基础，#ShowMenu 是允许我调用菜单的图像。）

$("#jQueryMenu")
    .menu()
    .hide()
    .blur( function () {
        $(this).hide();
    });
    
$("#ShowMenu")
    .click( function (){
        $(".jQueryMenu").show().focus();
    });

【讨论】：