點擊div內的div應該是關閉

Question

我試過這段代碼來打開內部div並關閉div。但我有問題，當我點擊外部的div然後它不是很接近。只是我需要幫助，當我點擊div外，那麼內部div應該是接近。

這裏是代碼：

<div class="userNameBox">prashant birajdar 
    <div class="profile" style="display:none" tabindex="-1"> 
     here is the code.   
    </div> 
</div> 

這裏是js代碼

$(".userNameBox").click(function() { 
    $(".profile").toggle("slow"); 
}); 

，這裏是jsfiddel http://jsfiddle.net/prashantbirajdar123/tY2vU/

Answer 1

我認爲最好的解決方案是在body上添加一個事件，這個事件會在click上隱藏配置文件，並且在你的userNameBox函數中停止事件傳播。

$(".userNameBox").click(function(e) { 
    e.stopPropagation(); 
    $(".profile").toggle("slow"); 
}); 

$(document).click(function(e){ 
    $(".profile").hide("slow"); 
}); 

Answer 2

監聽的身體，看看點擊來自

來到

$(document).click(function(evt) { 
    if($(evt.target).closest(".userNameBox").length===0 && $(".profile").is(":visible")) { 
     $(".profile").slideUp("slow"); 
    } 
});