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

Question

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

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

如果我只想用一些JQuery删除所有的出现：

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

虽然这在理论上可以使它工作，但我现在无法点击我打开的相同按钮来关闭它。它什么都不做，所以我可以删除：

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

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

我一直试图找到一种可以.each() $('.dropdown-toggle')次{{1}}次出现的方法来检查它的属性ID是否等于点击的属性ID如果没有删除所述下拉列表的发生并将咏叹调变为假，但我没有运气。

有什么建议吗？感谢。

Answer 1

所以这是我的抨击：

<强> Fiddle goes here

我们所做的是改变你计算要触发的元素的方式：

如果阻止

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);
}

parentScope变量可由文档层次结构中比菜单更高的任何节点填充，因此您可以合理地替换该行

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

类似

var parentScope = $(document.body);

我们确保在ul被.siblings()元素约束之前，我们选择了所有div.btn-group元素。

希望有所帮助。

Answer 2

您想知道用户何时点击元素外部进行取消标记：

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

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