jquery 이외의 항목을 선택하십시오.

Question

사용자가 외부에서 클릭 할 때 메뉴를 사라지게 만드는 방법을 알아 내려고하고 있습니다. 이 작동하지 않는 몇 가지 이유

$(*).not(menu).bind('click', function() { $(menu).hide() }) 

: 내 방식이있다. 내가 뭘 잘못하고 있을지 모르겠다. 이

$('*'). 

이 악 화 나쁜 카르마 당신에게

Answer 1

감사합니다! 대신

$(document.body).bind('click', function(e){ 
    if(e.target.id !== 'yourmenuid' || $(e.target).parents().is('#yourmenuid')) 
     $('#menuid').hide(); 
}); 

시도

사용은 항상 보편적 인 선택 *을 방지 할 수 있습니다. Sizzle은 마크 업에서 사용 가능한 모든 요소를 ​​실제로 쿼리합니다. 이는 엄청나게 비쌉니다.

Answer 2

이것은 나쁜 생각입니다.

쓰기 $('*')을 쓰면 에 클릭 핸들러가 추가되어 문서의 모든 요소가 느려집니다. 또한 나중에 추가 된 새 요소에 대한 클릭을 처리하지 않습니다.

대신 (그들은 않는 한 버블 업),이 같은 루트 요소에 대한 click 이벤트를 처리한다 : 모든 요소에

$(document).click(function(e) { 
    if (e.target === menu || $(e.target).parents().is(menu)) 
     return; 
    $(menu).hide(); 
}); 

모든 click 이벤트를 것이다 루트 요소까지 결국 거품 (당신이하지 않는 한 그것을 취소하십시오), 이렇게 이것은 각 누르기를 다룰 것이다.

Answer 3

대안으로, jQuery.hover을 고려 했습니까?

$('#menu > ul > li').hover(
    function() { $('ul', this).show(); }, 
    function() { $('ul', this).hide(); } 
); 

마우스 오버/마우스 출력시 표시/사라지는 것이 더 일반적인 방법입니다. jQuery.slideDown() 및 jQuery.slideUp()을 사용하면 더 부드럽게 만들 수도 있습니다.

$('#menu > ul > li').hover(
    function() { $('ul', this).slideDown(250); }, 
    function() { $('ul', this).slideUp(100); } 
); 

Answer 4

빠르고 쉬운 방법은이 작업을 수행하기 : 또는

jQuery(document).delegate(':not(#menu-id)', 'click', function(){ 
    $('#menu-id').hide(); 
}); 

:

$(document).click(function(){ 
    if (e.target !== menu && !$.contains(e.target, menu)) { 
     $(menu).hide(); 
    } 
});