jquery dropdown, toggle 외부영역을 클릭하여 닫기

dropdown을 trigger하는 클릭 이벤트를 사용할 때 가장 좋은 방법은 사용자가 해당 영역의 외부를 클릭하여 닫는 것 입니다.
클릭 이벤트에 대한 영역을 이해하면 꽤 간단하게 해결할 수 있습니다.

toggle() 을 사용한 예를 들어보겠습니다.

$('#trigger').click(function(){
    $('#drop').toggle();
});

문서를 클릭하여 요소를 닫습니다.

1. $(document).click(function(){
2.     $('#drop').hide();
3. });

앞의 코드를 적용해 보면 드롭다운이 실행되지 않는 것을 볼 수 있습니다.
$(document)에서 hide() 이벤트를 실행하기 때문입니다.

따라서, 클릭 이벤트를 중지하는 스크립트를 사용합니다.
이것은 $(document)에 도달하지 않도록 합니다.

1. $('#trigger').click(function(event){
2.     event.stopPropagation();
3.     $('#drop').toggle();
4. });

이제 마지막 코드는 다음과 같습니다.

1. $('#trigger').click(function(event){
2.     event.stopPropagation();
3.     $('#drop').toggle();
4. });
5.  
6. $(document).click(function(){
7.     $('#drop').hide();
8. });

링크 : http://www.craigmdennis.com/