点击功能关闭所有打开

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