7

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

这是我到目前为止的代码：

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

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

4

6 回答 6

10

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

$("#menu").blur(function () {
    // Your code here to either hide the menu (.toggle())
    // or remove it completely (.remove()).
});
于 2012-12-14T07:50:57.807 回答
1

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

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

// show
$('#menu').show().focus();
于 2013-04-27T19:37:03.440 回答
0

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

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

于 2015-05-30T22:39:07.663 回答
0

从@Levi Botelho Ans和@Ahmed-Anas 的评论中，我在第一次创建小部件时使其更具可重用性。像这样的东西：

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
});
于 2021-04-07T08:49:03.177 回答
0

嗨，这是我们在 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();
});

希望能帮助到你

于 2016-10-07T12:56:34.290 回答
0

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

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

$("#jQueryMenu")
    .menu()
    .hide()
    .blur( function () {
        $(this).hide();
    });
    
$("#ShowMenu")
    .click( function (){
        $(".jQueryMenu").show().focus();
    });
于 2021-09-07T13:02:47.160 回答