點擊功能關閉所有打開

Question

我有一個菜單，使用點擊功能打開隱藏的div。 編號喜歡讓他們關閉時，點擊切換div的外部。 我試過幾件事，但它呈現一個點擊功能，所以它不會再次單擊時關閉隱藏div。

$(document).on('click', '.user-alt > li > a', function(e){ 
    var popup = $(this).parent('li').find('.bar-pop'); 
    $(".user-alt > li .bar-pop").not(popup).hide(); 
    $('.menu-accountparent.selectedMenuItem').not($(this)).removeClass('selectedMenuItem'); 
    $(this).toggleClass('selectedMenuItem'); 
    popup.toggle(); 
}); 

這裏的jsfiddle：http://jsfiddle.net/fkrosq8w/

---

我已經試過這和作品，但就像我說的鏈接點擊菜單中再次不關閉隱框：

$('body').on('click', '*:not(.user-alt > li .bar-pop)', function() { 
    var popup = $('.user-alt > li .bar-pop'); 
    popup.hide(); 
}); 

Answer 1

希望這有助於你

$(document).on('click', function (e) { 
var click = $('a'); 
var pop = $('.bar-pop'); 
if (!click.is(e.target) && click.has(e.target).length === 0) 
{ 
    pop.hide(); 
} 

}）;

jsfiddle

Answer 2

編輯：

根據您的評論噸，這可能是值得簡化你的標記，並以更簡單的方式做到這一點。我不知道你有多大的控制了您的標記，但也許這將幫助：

鑑於這種標記（我添加了一個類的toggle到錨標籤）：

<ul class="user-alt"> 
    <li class="messages"> 
    <a title="Messages" class="toggle" href="#">Open/Close</a> 
    <div class="bar-pop"> 
     Hidden block Here 
    </div> 
    </li> 
    <li class="messages"> 
    <a title="Messages" class="toggle" href="#">Open/Close</a> 
    <div class="bar-pop"> 
     Hidden block Here 
    </div> 
    </li> 
    <li class="messages"> 
    <a title="Messages" class="toggle" href="#">Open/Close</a> 
    <div class="bar-pop"> 
     Hidden block Here 
    </div> 
    </li> 
</ul> 

隱藏div.bar-pop默認：

.bar-pop{ 
    display:none; 
    border:1px solid #ccc; 
    padding:10px; 
} 

然後切換他們前後像這樣：

$('.toggle').on('click', function(e){ 
    e.preventDefault(); 
    $(this).next().toggle(); 
}); 

然後，聽取點擊文檔（或身體，如果您願意），檢查點擊來自的元素的類名稱並作出相應的反應：如果類名匹配toggle或bar-pop，則什麼都不做，否則隱藏任何可見彈出窗口。

$(document).on("click", function(e){ 
    if(!e.target.className.match(/toggle|bar-pop/)){ 
    $(".bar-pop").hide(); 
    } 
}); 

這是updated demo。

你能做到像這樣：

$(document).on("click", function(e){ 
    if ($(".bar-pop").length && !e.target.className.match(/selectedMenuItem|bar-pop/)){ 
     $(".selectedMenuItem").removeClass('selectedMenuItem'); 
     $(".bar-pop").hide(); 
    } 
}); 

Demo