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

Question

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

现在我确信在实例打开之前关闭它们一定非常简单。但是，如果你看一下这个 fiddle :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-expanded 更改为 false，但我没有运气。

有什么建议吗？谢谢。

Answer 1

所以这是我的尝试:

<强> Fiddle goes here

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

IF block

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

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

希望有帮助。