2012-10-18 43 views
1

我正在使用以下内容作为下拉菜单。它工作得很好,但是,我无法弄清楚如果在单击正文中的某个位置或单击另一个下拉列表时如何获得打开的下拉菜单。单击相邻时关闭下拉菜单

$(document).ready(function() { 
$('.nav li').click(function() { 

    var slideToggle = this; 
    if ($('ul', this).is(':visible')) { 
     $('ul', this).slideUp(function() { 
      $(slideToggle).removeClass('active'); 
     }); 
    } 
    else { 
     $('ul', this).slideDown(); 
     $(slideToggle).addClass('active'); 
    } 
}); 
}); 

查看它的行动在这里:http://jsfiddle.net/Ngh5C/1/

什么会去什么我问过的最简单的方法是什么?

回答

2

利用事件冒泡并将点击处理程序绑定到合适的父容器(例如body)。检查处理程序中的目标,如果它不是您的菜单之一,请使用选择器查找打开的菜单并关闭它。

这里有一个简单的例子作为出发点:

http://jsfiddle.net/Ngh5C/6/

试试这个小提琴在同一时间只保留一个开放:

http://jsfiddle.net/Ngh5C/7/

如果你真的只想要关闭项的点击邻居(这是一个奇要求),那么这个作品:

http://jsfiddle.net/Ngh5C/8/

+0

在发布jsfiddle之前,我想出了几乎完全相同的东西。用不同的方式,但你的线条更少,效率更高。现在的一个问题是,在.slideUp()不会删除活动类之后,添加.removeClass('active')。 –

+0

没关系,我是从孩子ul中删除活动类,而不是活动最初分配给其的父li。 如果点击相邻的菜单,你能帮助我关闭一个打开的菜单吗? –

+0

@AjTroxell:我改变了小提琴一次只打开一个菜单。我想这就是你想要的。如果你真的只想限制相邻的菜单,只需稍微调整一下选择器即可。 –

相关问题