jQuery는 흐림 효과를 나타냅니다. - 형태가 흐려진 경우에만 흐림 효과를 나타냅니다.

Question

집중할 때 확장되는 검색 입력 (#search_input)이 있습니다. 특정 검색 옵션을 선택할 수있는 추가 검색 옵션 팝업이 나타납니다.

입력이 흐려지면 입력이 줄어들지 만 양식 외부에서 흐려짐이 트리거 된 경우에만 입력이 줄어들 수 있습니다.

http://jsfiddle.net/zMp9S/

지금 난 그냥 검색 옵션 메뉴에서 옵션을 선택하고있어 경우에도 너무 일찍 검색 입력을 계약 다음 사용하고 있습니다 :

$(function() { 
    $("#search_input").focus(function(){ 
     $("#search_input").stop().animate({width: 310}, 200); 
     $("#search_options").show(); 
    }) 
    $("#search_input").blur(function(){ 
     $("#search_input").stop().animate({width: 100}, 200); 
     $("#search_options").hide(); 
    })   
});​ 

초점을 두는를/양식의 흐림 이벤트가 작동하지 않습니다.

흐림 현상이 #search_form 외부에서 발생하는 경우 jQuery에만 #search_input을 계약하게 할 수 있습니까?

Answer 1

당신은 그렇지 않으면 당신은 사용자가 사업부의 초점을 잃는 경우 감지 할 수있을 것이다 (즉, 실제로 초점/흐림 이벤트가 없습니다!)

창의 클릭 이벤트에 바인딩해야합니다

$(window).click(function(e) { 
     if (e.target.id != 'search_options' && e.target.parentNode.id != 'search_options' && e.target.id != 'search_input') { 
      $("#search_input").stop().animate({ 
       width: 100 
      }, 200); 
      $("#search_options").hide(); 
     } 
    }); 

http://jsfiddle.net/zMp9S/9/