當點擊任何不是div的東西時隱藏div

Question

我有一個名爲.dots_menu的div，當點擊.dots時出現。

我想寫一個隱藏這個div的代碼，只要用戶點擊其他任何不是.dots_menu的div（例如div的頁面背景）。

這是我的HTML部分：

<img src="3dots.png" class="dots"/> 
<div class="dots_menu"> 
    <a href="#">Install</a> 
    <a href="#">Add to wishlist</a> 
</div> 

這是我的CSS部分：

.dots{ 
    height: 25px; 
    float: right; 
} 

.dots_menu{ 
    display: none; 
    width: 202px; 
    position: absolute; 
    top: 40px; 
    right: 1px; 
    z-index: 1; 
    background: rgb(238, 238, 238); 
    -webkit-box-shadow: 0px 4px 15px #000; 
    -moz-box-shadow: 0px 4px 15px #000; 
    box-shadow: 0px 4px 15px #000; 
} 

.dots_menu.show{ 
    display: block; 
} 

.dots_menu a { 
    display: block; 
    text-decoration: none; 
    color: #000; 
    padding: 10px; 
    font-family: arial; 
} 

這是我的jQuery不工作：

$('.dots').click(function(){ 
    $('.dots_menu').removeClass('show'); 
    $(this).next().addClass('show'); 
    $(document).one("click",function(){ // 
     $('.dots_menu').removeClass('show'); 
    }); 
}); 

Answer 1

關閉我的頭頂：

$(document).click(function() { 
    if(! $(this).hasClass('dots_menu') && $('.dots_menu').hasClass('show')) { 
     $('.dots_menu').removeClass('show'); 
    } 
}); 

編輯：根據https://stackoverflow.com/a/7385673/2061557

$(document).mouseup(function (e) 
{ 
    var container = $(".dots_menu"); 

    if (! container.is(e.target) && container.has(e.target).length === 0) 
    { 
     $(".dots_menu").removeClass("show"); 
    } 
}); 

你也應該考慮使用Twitter的引導情態動詞http://getbootstrap.com/javascript/#modals

Answer 2

我認爲你可以這樣做：

$('.dots').click(function(){ 
    $('.dots_menu').addClass('show'); 
}); 

$(document).find("*:not(.dots_menu)").one("click",function(){ 
     $('.dots_menu').removeClass('show'); 
    }); 

或者這樣：

$(document).one("click",function(e){ 
     if (e.target.className!="dots_menu") $('.dots_menu').removeClass('show'); 
});