5

hej faceci nadzieję, że ty mi pomóc ...ukryj menu jQuery UI po kliknięciu gdziekolwiek indziej

im nieco od początkujących z jQuery i JavaScript. próbuje zaimplementować menu jquery-ui, które pojawia się po kliknięciu obiektu, ale znika po kliknięciu w dowolnym miejscu poza samym menu.

jest to kod mam tak daleko

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

     }); 

teraz chcę ukryć i zniszczyć menu jeśli kliknięcie jest wykonany w miejscu innym niż na itself..thanks menu z wyprzedzeniem.

Odpowiedz

8

Chcesz użyć zdarzenia rozmycia, które jest uruchamiane, gdy obiekt traci ostrość. Kliknięcie na coś innego odciągnie uwagę.

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

mogę zmusić go do pracy dla niektórych powodem zdarzenie jest wywoływane tylko po kliknięciu w pozycję „#menu” po raz pierwszy i kliknąć gdzieś indziej na ekranie. –

+4

faktycznie to działa. Po prostu musiałem zrobić $ ("# menu"). Focus(); kiedy został kliknięty, ponieważ kiedy kliknięto div i menu pokazuje, fokus nie był w menu .. dzięki za wyjaśnienie, ponieważ pomógł mi to rozgryźć :) .. –

1

Wystarczy do zbiorników dla powyższego kodu i komentarz (@ śmierci relic0, @ Levi-Botelho)

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

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

miałem ten sam problem z widget jQuery UI selectmenu i problem wystąpił, bo nie zaimportował pliku css menu kontekstowego interfejsu JQuery. Zdecydowałem się tego nie robić, ponieważ chciałem sam wybrać styl menu.

Aby rozwiązać ten problem I dodaną [aria-hidden="true"] { display: none; } do własnej css, zauważyłem, że ta właściwość aria została przełączanie pomiędzy true i false kiedy gra w kółko, próbując rozwiązać problem.

0

Oto proces, który stosujemy w Oodles Technologies, aby ukryć datakser jquery.

Podstawowa struktura naszego modalu będzie wyglądać tak.

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

I to jest nasz podstawowy css i to na określonej wysokości modalnej.

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

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

nadzieję, że pomoże

Powiązane problemy