当我只需要打开一个时，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') 检查它的属性 ID 是否等于单击的那个，如果不删除所述下拉列表的出现并更改aria-expanded to false 但我没有运气。

有什么建议吗？谢谢。

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

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

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

类似的东西

var parentScope = $(document.body);

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

希望对您有所帮助。

Answer 2

您想知道用户何时在您的元素之外单击以取消切换：

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

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