5

Эй, ребята, надеялся, что вы могли бы помочь мне ...скрыть меню JQuery UI при нажатии в другом месте

им несколько послушника с JQuery и JavaScript. пытаясь реализовать меню jquery-ui, которое появляется при щелчке по объекту, но исчезает, когда щелчок делается в любом месте, кроме самого меню.

это код, который я до сих пор

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

     }); 

теперь я хочу, чтобы скрыть и уничтожить меню, если щелчок производится в любом другом, чем на itself..thanks меню заранее.

ответ

8

Вы хотите использовать событие размытия, которое срабатывает, когда объект теряет фокус. Нажатие на что-то другое отвлечет внимание.

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

не могу заставить его работать, по какой-то причине событие вызывается только тогда, когда я нажимаю элемент в «#menu» в первый раз и нажмите где-нибудь еще на экране. –

+4

действительно получил его на работу .. Мне просто нужно было сделать $ («# menu»). Focus(); когда он был нажат, потому что, когда нажал div и отобразилось меню, фокус не был в меню. Спасибо за объяснение, так как он помог мне разобраться в этом :) .. –

1

Просто емкости для выше кода и комментариев (@ смерть relic0, @ Levi-Ботели)

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

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

Я была такая же проблема с JQuery UI selectmenu виджетом и проблема возникла потому, что я не импортировал файл selectmenu css JQuery UI. Я решил не делать этого, потому что я хотел сам стилизовать меню выбора.

Чтобы устранить эту проблему, я добавил [aria-hidden="true"] { display: none; } к моему собственному CSS, я заметил, что эта ария собственность была переключаясь между true и false, когда я играл вокруг, пытаясь решить проблему.

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

Надежда Это помогает

Смежные вопросы