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

hey guys was hoping you could help me out...

嘿，伙计们希望你们能帮我……

im somewhat of a novice with jquery and javascript. trying to implement a jquery-ui menu that appears when an object is clicked but dissapears when a click is made anywhere other than on the menu itself.

我是jquery和javascript的初学者。尝试实现一个jquery-ui菜单，该菜单在单击对象时出现，但在除菜单本身之外的任何地方单击时消失。

this is the code I have so far

这是我到目前为止的代码

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

       });

now I want to hide and destroy the menu if a click is made anywhere other than on the menu itself..thanks in advance.

现在我想要隐藏和破坏菜单，如果点击除了菜单本身以外的任何地方。提前谢谢。

4 个解决方案

#1

You want to use the blur event, which fires when an object loses focus. Clicking on something else will take the focus away.

您希望使用blur事件，它在对象失去焦点时触发。点别的东西会让你失去注意力。

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

#2

Just to tanks for above code and comment (@death-relic0, @levi-botelho)

仅针对上面的代码和注释(@death-relic0， @levi-botelho)

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

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

#3

I had the same issue with the JQuery UI selectmenu widget and the problem occurred because I didn't import the JQuery UI selectmenu css file. I chose not to because I wanted to style the select menu myself.

我对JQuery UI selectmenu小部件也有同样的问题，问题出现是因为我没有导入JQuery UI selectmenu css文件。我选择不这样做是因为我想自己设计select菜单的样式。

To fix the problem I added [aria-hidden="true"] { display: none; } to my own css, I noticed that this aria property was toggling between true and false when I playing around trying to fix the issue.

为了解决这个问题，我添加了[aria-hidden="true"] {display: none;对于我自己的css，我注意到当我试图修复这个问题时，aria属性在真与假之间切换。

#4

hi this is the process we follow in Oodles Technologies to hide jquery datepicker .

你好，这是我们在Oodles技术中隐藏jquery datepicker的过程。

The basic structure of our modal will look like this.

模态的基本结构是这样的。

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

And this is the our basic css and that’s for defined height modal.

这是我们的基本css，这是定义高度模态。

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

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

Hope It Helps

希望它能帮助

#1