Question

嘿伙计们希望你能帮帮我...

我有点像jquery和javascript的新手。尝试实现一个jquery-ui菜单，该菜单在点击一个对象时出现，但是当在菜单本身以外的任何地方进行点击时会消失。

这是我到目前为止的代码

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

       });

现在我想隐藏和销毁菜单，如果点击是在菜单本身以外的任何地方进行的......请提前感谢。

Answer 1

您想要使用模糊事件，该事件在对象失去焦点时触发。点击其他内容将会把焦点拉开。

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

Answer 2

上述代码和评论的坦克（@ death-relic0，@ levi-botelho）

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

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

Answer 3

我遇到了与JQuery UI selectmenu小部件相同的问题并且发生了问题，因为我没有导入JQuery UI selectmenu css文件。我选择不这样做，因为我想自己设置选择菜单的样式。

要解决这个问题，我已将[aria-hidden="true"] { display: none; }添加到我自己的CSS中，我注意到当我试图解决问题时，此咏叹调属性在true和false之间切换。

Answer 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();
});

希望它有助于

Answer 5

来自@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
});

在其他任何地方点击时隐藏jquery ui菜单

5 个答案: