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

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

现在我确定在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-扩大到假，但我没有运气。

有什么建议吗？谢谢。

来源

2014-12-04 mdixon18

在'中是否可以有更多'按钮''ul'对。BTN-group'？点击页面中的任何其他按钮时，是否要关闭所有其他菜单？或者只是在炫耀自己的？ – reyaner 2014-12-04 22:21:40

这个问题应该有所帮助：http://stackoverflow.com/questions/2868582/click-outside-menu-to-close-in-jquery – philtune 2014-12-04 22:22:56

因此，这里是我的刺吧：

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元素。

希望有所帮助。

来源

2014-12-04 22:21:58

这很好，但我希望它可以在整个页面中打开，而不仅仅是在同一部分。如果一个下拉菜单位于导航栏中而另一个位于页面内容的其他位置，则仅在父范围内查看并不理想。 – mdixon18 2014-12-04 22:30:49

@Matthew - “parentScope”是一个任意的容器。尝试将它设置为'$（document.body）'，它仍然可以工作。 – 2014-12-04 22:31:44

是的，我只是在更改JS小提琴的过程中更新和评论在这里，以防其他人有类似的问题。但是，您的评论适用于此。感谢您的回复。 – mdixon18 2014-12-04 22:36:51

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

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

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

来源

2014-12-04 22:26:18 philtune

然而，这并不是我在我的问题中所要做的，对于那些希望适应此代码的人来说，这是一个很棒的评论。我会为它投票。 – mdixon18 2014-12-04 22:41:42

真棒，我会采取upvotes我可以得到他们。 :) – philtune 2014-12-04 22:42:37

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

回答

相关问题