텍스트 상자에 포커스가있을 때 div를 숨기는 방법?

Question

본문을 클릭하기 전까지 작동하는 사이드 바가 있습니다. 클릭 사이드 바 사이드 바

1. 에서 일어나는

   이 나오고로 마우스에 숨겨진 간다.

2. 사이드 바 내부에 입력 상자가있는 경우 숨길 수 없습니다.
3. 입력에 초점이 맞춰지지 않은 경우 1 단계를 잘 따르십시오. 내가 want- 무엇

입력이 사이드 바의 내부 그리고 다음이 사이드 바를 숨기거나 몸에 그것이 있어야 클릭해야하기 때문에 몸의 입력 상자에 초점이 집중 동시에 초점을 맞추고

행동에 숨어있다.

jQuery-

$(function(){ 

    $('.sidebar-alert').on('click',function(){ 
    $(this).animate({left:0},200); 
    event.stopPropagation(); 
}); 
    $('.sidebar-alert').on('mouseleave ',function(){ 

     if($(".focused-input").is(":focus")) 
    { 
     $('.sidebar-alert').show(); 
    } 


     else 
     { 
      $('.sidebar-alert').animate({left:-295},200); 

     } 

    }); 
}); 

나는 마우스 오버를 결합하고 사이드 바 숨기기 위해 클릭 할 수 없습니다입니다.

JS fiddle

업데이트 바이올린

Answer 1

당신은 입력에 대한 blur 이벤트를 추가 할 수 있습니다. 즉,이 같은 코드의이 부분에 하나 개 이상의 이벤트 및 선택기를 추가 할 수 있습니다 당신이

$(".focused-input").on('blur', function() { 
    $('.sidebar-alert').animate({ 
      left: -295 
    }, 200); 
}); 

Check Fiddle

Answer 2

을 가지고 문제 처리됩니다 :

$('.sidebar-alert, .focused-input').on('mouseleave focusout', function() { 
    if ($(".focused-input").is(":focus")) { 
     $('.sidebar-alert').show(); 
    } else { 
     $('.sidebar-alert').animate({ 
      left: -295 
     }, 200); 
    } 
});