jquery show hide division

Question

$(document).ready(function() { 
    $(".btn-slide").focus(function() { 
     $("#moresearch").show("fast"); 
     $(".btn-slide").blur(function() { 
      $("#moresearch").hide("fast"); 
     }); 
    }); 
}); 

이 샘플에서는 .btn-slide이 내 텍스트 상자입니다. 초점이 맞춰지면 moresearch div가 표시됩니다. div가 숨어있는 것이 blured 일 때.

문제는 내가 moresearch div를 클릭하면 div가 닫히지 만 외부에서 클릭 할 때만 닫아야한다는 것입니다.

Answer 1

우선 포커스를 중첩하고 이벤트 바인딩을 흐리게 처리하는 이유는 무엇입니까? 그런 식으로, 'blur'는 'focus'이벤트가 발생할 때마다 바인딩됩니다.하지만 바인딩되지는 않습니다. 하지만 여기서 문제가되지 않습니다.

하나의 가능한 솔루션은 흐림 콜백에서 초점이 이동 한 요소를 확인하는 것입니다. 이를 수행하는 방법에 대한 정보는 When onblur occurs, how can I find out which element focus went *to*?을보십시오.

어쩌면 그런 일 :

if (!$("#moresearch").has($(target)) > 0 &&! $("#moresearch")[0] == target) 

이 확인됩니다 초점이 왼쪽이 목표 div 이하의 하나입니다 여부 : 트릭에 또는 오히려이 있습니다

$(".btn-slide").blur(function(event) { 
    var target = event.explicitOriginalTarget||document.activeElement; 
    if (target != $("#moresearch")[0]) { 
     $("#moresearch").hide("fast"); 
    } 
} 

편집 그것은 아이들입니다. 그것을 시도하지 않았습니다.

Answer 2

이 시도 :

$(document).ready(function() { 
    $(".btn-slide").focus(function() { 
     $("#moresearch").fadeIn("fast"); 
     $('body').not('.btn-slide').click(function() { 
      $("#moresearch").fadeOut("fast"); 
     }); 
    }); 
}); 

참고 : 사용 fadeIn() 및 fadeOut 당신이 애니메이션 작업을 수행 할 때 대신/숨기기를 보여줍니다.