当我只需要打开一个下拉菜单时，JQuery下拉菜单打开多个下拉菜单

Question

基本上，我有一个单独工作的下拉菜单，当您单击它打开的按钮时，如果再次单击它，它会关闭。现在，如果我要同时打开另一个，那么我就有问题了，他们都是开放的。

现在我确定在isntances打开之前关闭它们一定非常简单。但是，如果你看看这个小提琴：http://jsfiddle.net/g2c10t53/

如果我是简单地删除一些JQuery的所有出现：

$('.dropdown-toggle').attr('aria-expanded',false); 
$('.dropdown-menu').removeClass('open'); 

虽然这在理论上使它工作，我现在不能点击相同的按钮，我已经打开关闭它。它根本不算什么，这样我就可以删除：

$('.dropdown-toggle').attr('aria-expanded',false); 

不过，如果我是开始按钮，我有一个问题，我必须点击两次打开，我不想做其他的下拉菜单之间交换。

我一直在试图找到一种方法，我可以通过.each()发生$('.dropdown-toggle')来检查它的属性ID是否等于单击的属性ID，如果不删除所述下拉的发生并更改aria-扩大到假，但我没有运气。

有什么建议吗？谢谢。

Answer 1

因此，这里是我的刺吧：

Fiddle goes here

我们所做的是改变你如何计算哪些元素火上：

IF块

if ($(this).attr('aria-expanded') === "false") { 
    var menuID = $(this).attr('id'), 
     parentScope = $(this).parent().parent(); 
    parentScope.find('ul').removeClass('open').attr('aria-expanded', false); 
    parentScope.find('ul[aria-labelledby=' + menuID + ']').addClass('open') 
    parentScope.find('button[aria-expanded=true]').attr('aria-expanded', false); 
    $(this).attr('aria-expanded', true); 
} 

The parentScope variable可以存在于文档层次比菜单更高的任何节点进行填充，所以合理的，你可以用一些替代的行

var parentScope = $(this).parent().parent(); 

像

var parentScope = $(document.body); 

我们确保我们在.siblings()受到div.btn-group元素的约束之前，用此选择所有ul元素。

希望有所帮助。

Answer 2

你想知道用户点击你的元素以外的untoggle时：

$(document).click(function(e){ 
    if($('#menuONE').has(e.target).length === 0) { 
     // toggle menu to close 
    } 
}); 

这是默认的方式，我见过的大多数网站处理关闭菜单，当用户点击远离它。您正在检测所有点击并确定点击是否在您的元素之外。 #menuONE将是你的菜单元素。如果用户点击它，则不希望菜单关闭。