需要關閉下拉上點擊其他地方

Question

HTML：

<div id="contentTitle"> 
    <span class="btnShare"> 
    <a href="#">Share</a> 
    <ul> 
     <li><a href="#">Post to Facebook</a></li> 
     <li><a href="#">Email Link</a></li> 
     <li><a href="#">Copy Link</a></li> 
     <li><a href="#">Print</a></li> 
    </ul> 
    </span> 
</div> 

的Javascript：

$(document).ready(function(){ 
    var shnum = 0; 
    $('#contentTitle .btnShare a').click(function(){ 
     if(shnum==0) { 
      $('#contentTitle .btnShare ul').css('display','block'); 
      shnum = 1; 
     } 
     else { 
      $('#contentTitle .btnShare ul').css('display','none'); 
      shnum = 0; 
     } 
    }); 
}); 

上面的代碼，以顯示/隱藏下拉菜單中點擊共享錨標記時。我需要關閉下拉菜單，當用戶點擊其他位置時。上面的代碼不支持「$（」body「）。click」function。請幫忙。

Answer 1

$(document).ready(function(){ 
    var shnum = 0; 
    $('#contentTitle .btnShare a').click(function(){ 
     if(shnum==0) { 
     $('#contentTitle .btnShare ul').css('display','block'); 
     shnum = 1; 
    } 
     else { 
      $('#contentTitle .btnShare ul').css('display','none'); 
      shnum = 0; 
     } 
    }); 
    $('#contentTitle .btnShare a').blur(function(){ 
     $('#contentTitle .btnShare ul').css('display','none'); 
     shnum = 0; 
    }); 
}); 

Answer 2

這個代碼將做到這一點：

$(document).click(function(e){ 
    if (!$('#contentTitle .btnShare a').is(e.target) && !$('#contentTitle .btnShare ul').is(e.target) && $('#contentTitle .btnShare ul').has(e.target).length === 0){ 
     $('#contentTitle .btnShare ul').css('display','none'); 
     shnum = 0; 
     } 
});