所以，我有一个简单的菜单：当你点击一个显示一个项目，当你点击两个显示两个项目。 ONE和TWO有一个切换功能，所以它们可以在点击时向下滑动，但是当我切换TWO而不关闭ONE时，事情会变得混乱。jquery dropdown点击
$(function() {
$('li.sub', '#navigation').each(function() {
var $li = $(this);
var $div = $('div.submenu', $li);
var top = $li.height();
$li.toggle(function() {
$div.css('top', top).
slideDown('slow');
},
function() {
$div.
slideUp('slow');
});
});
});
小提琴：http://jsfiddle.net/vGSWm/2/
你可以试试这个
$(function() {
$('#navigation li.sub').click(function(e) {
var el = $(this).find('.submenu');
$('.submenu').not(el).slideUp(function(){
el.slideToggle();
});
});
});
更新：
$(function() {
$('#navigation li.sub').click(function(e) {
var el = $(this).find('.submenu');
if(el.hasClass('open'))
{
el.slideUp(function(){
el.removeClass('open');
});
}
else
{
var opened = $('.submenu.open');
if(opened.length)
{
opened.slideUp(function(){
opened.removeClass('open');
el.slideToggle(function(){
el.addClass('open');
});
})
}
else
{
el.slideToggle(function(){
el.addClass('open');
});
}
}
});
});
DEMO。
+1。很好，很简洁。 – 2013-02-25 02:27:03
@SimonC，谢谢:-) – 2013-02-25 02:31:55
谢谢，它的工作原理！ – frubs 2013-02-25 09:37:17
为了解决这个问题，需要以编程方式触发任何已经打开的列表项切换。
最简单的方法是在显示刚刚单击的菜单的div以隐藏所有div之前添加代码。
例如编辑功能，所以它读取：
$li.toggle(function() {
$('div.submenu:visible').parent('li.sub').click();
$div.css('top', top).
slideDown('slow');
},
此解决方案假定您可能需要有两个以上的列表项，并会扩展为任意数量。如果您知道只有两个列表项目，您可以直接调用列表项目。
请不要在您的问题中包含“谢谢”，“任何人？”或“表情符号”。他们是无用的噪音。 – Doorknob 2013-02-24 23:56:27
预期的行为是什么？你能否描述一下当你点击两下而没有先关闭它时你会怎么样？ – 2013-02-25 00:17:47
toggle在jQuery 1.8中已被弃用，并在1.9中被删除。可能很好找到一个不使用它的解决方案。使用点击处理程序可能是一个好主意。 – 2013-02-25 02:26:44