jquery dropdown, toggle 외부영역을 클릭하여 닫기
2016. 7. 25. 10:05ㆍ웹랩/JavaScript
반응형
dropdown을 trigger하는 클릭 이벤트를 사용할 때 모바일에서 가장 많이 쓰는 방법 중 사용자가 해당 영역의 외부를 클릭하여 닫는 방법에 대해 알아보겠습니다.
클릭 이벤트에 대한 영역을 이해하면 꽤 간단하게 해결할 수 있습니다.
JS
$('#trigger').click(function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click(function(){
$('#drop').hide();
});
stopPropagation()의 사용으로 toggle() 이벤트 실행 시 document 클릭 이벤트에 도달하지 않도록 함
반응형
'웹랩 > JavaScript' 카테고리의 다른 글
| jQuery 셀렉터(선택자) : 원하는 노드를 얻는 방법 (0) | 2017.11.05 |
|---|---|
| 상단, 하단 스크롤 버튼 (0) | 2016.08.08 |
| jQuery (2) | 2016.08.08 |
| split 함수를 이용하여 URL주소를 배열로 받기 (0) | 2016.07.25 |
| jquery offset()을 이용한 부드러운 스크롤 이동 (0) | 2016.07.25 |