클릭시 펼치기, 클릭시 펼치기

Question

클릭시 펼치기를 원하는 요소가 있고 바깥 쪽 클릭시 붕괴되어 다음 코드가 나타납니다. 그러나 이것을 실행하면 두 함수가 순차적으로 호출되므로 확장이 시작되고 즉시 축소됩니다. 나는 왜 그리고 어떻게 이것을 해결할 지 이해하지 못합니다.

jQuery(document).ready(function() { 

var element   = jQuery("#search-main"); 
var defaultWidth = jQuery("#search-main").css('width'); 
var expandWidth  = "200px"; 

var fnSearch = { 
    expand : function() { 

     jQuery(element).animate({ 
      width : expandWidth 
     }); 

     jQuery(document).bind('click', fnSearch.collapse); 
    }, 

    collapse : function() { 

     jQuery(element).animate({ 
      width : defaultWidth 
     }); 

     event.stopPropagation(); 

     jQuery(document).unbind("click", fnSearch.collapse); 

    } 
} 

jQuery("#search-main").bind("click", fnSearch.expand); 

}); 

Answer 1

당신은 클릭 한 후 #search-main 요소에서 클릭 이벤트를 바인딩 해제, 또는 이벤트의 전파를 중지하지만 대신 이벤트를 흐림에 바인딩 추천 초점을 맞출 것입니다 수 :

http://jsfiddle.net/6Mxt9/

(function ($) { 
    $(document).ready(function() { 
     var element = jQuery("#search-main"); 
     var defaultWidth = jQuery("#search-main").css('width'); 
     var expandWidth = "200px"; 

     $('#search-main').on('focus', function() { 
      $(element).animate({ 
       width: expandWidth 
      }); 
     }).on('blur', function() { 
      $(element).animate({ 
       width: defaultWidth 
      }); 
     }); 
    }); 
})(jQuery); 

이렇게하면 사용자가 필드 안팎을 탭하더라도 작업 할 수 있습니다.

Answer 2

#search-main 클릭 이벤트가 문서로 전파 중이기 때문에 문제가 발생했습니다. 즉, 먼저 #search-main 클릭 이벤트 트리거가 발생하면 document 클릭 이벤트가 트리거됩니다. 클릭 이벤트는 기본적으로이 작업을 수행합니다. 이 이벤트 전파를 중지하려면, 당신은 당신의 expand 기능에 http://api.jquery.com/event.stoppropagation/을 사용하려면 : 말했다

jQuery(document).ready(function() { 

var element   = jQuery("#search-main"); 
var defaultWidth = jQuery("#search-main").css('width'); 
var expandWidth  = "200px"; 

var fnSearch = { 
    expand : function(event) { // add event parameter to function 
     // add this call: 
     event.stopPropagation(); 

     jQuery(element).animate({ 
      width : expandWidth 
     }); 

     jQuery(document).bind('click', fnSearch.collapse); 
    }, 

    collapse : function() { 

     jQuery(element).animate({ 
      width : defaultWidth 
     }); 

     jQuery(document).unbind("click", fnSearch.collapse); 

    } 
} 

jQuery("#search-main").bind("click", fnSearch.expand); 

}); 

, 제이슨 P의 솔루션 당신이 원하는 것을 위해 더 낫다. document에 자료를 묶어 둘 필요가 없으므로 안정적이고 덜 복잡합니다. 전략을 쉽게 습득하면 다른 코드와 쉽게 충돌을 일으키고 추적하기가 어려워 질 수 있습니다.