드롭 다운 메뉴가 열려 있고 사용자가 문서를 클릭 할 때 드롭 다운 메뉴를 닫으려고 시도합니다.

Question

사용자가 열린 상태를 벗어날 때 내 드롭 다운 메뉴를 숨기려고합니다. Im은 메뉴가 열려 있는지 여부를 결정하는 플래그 isActive을 사용합니다. 클릭 이벤트가 추가되면 문서를 클릭하여 메뉴를 숨기고 메뉴가 클릭되면 전파를 중지합니다. 지금은 드롭 다운 앵커 태그를 클릭하면 문서 클릭 이벤트가 발생합니다. 아무도 내가 이것을 고치는 방법을 조언 할 수 있습니까?

$(document).on('click', function(e){ 
    if(isActive && $(e.target).closest('.social-share-options').length === 0){ 
     $('.social-share-options').removeClass('is-active'); 
     isActive = false; 
    } 
}); 

Answer 1

클릭 한 어떤 경우 검사 드롭 다운 여부를 내이며, 클릭 된 어떤 경우 다음 드롭 다운을 숨길 조건을 확인 드롭 다운 내에 있지 테스트하지는 않았지만 e.stopPropagation()을 추가해야 이벤트가 버블 링되지 않습니다.

$('.btn-social-share').on('click', function(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 
     //... 

http://api.jquery.com/event.stopPropagation/

Answer 2

:

JS

//User profile share tooltip 
     $('.btn-social-share').on('click', function(e){ 
      e.preventDefault(); 

       if(!isActive){ 
        $('.social-share-options').show(); 
        isActive = true; 
       } else { 
        $('.social-share-options').hide(); 
        isActive = false; 
       } 

     }); 

     /* Anything that gets to the document 
      will hide the dropdown */ 
     $(document).on('click', function(){ 
      if(isActive){ 
       $('.social-share-options').hide(); 
       isActive = false; 
      } 
     }); 

     /* Clicks within the dropdown won't make 
      it past the dropdown itself */ 
     $('.social-share-options').click(function(e){ 
      e.stopPropagation(); 
     });