Jquery – 在一个简单的下拉菜单中操作类

所有,

我以前发过一个问题,但没有得到答案(诚然,由于措辞不佳)。 在更新/测试代码之后重新发布。

我想构建一个简单的下拉菜单。 Jsfiddle 。

问题

菜单下拉并重新点击标签,折叠得很好。 但是,当菜单关闭而另一个标签是点击时,事情会变成梨状,即其他菜单不会下降。

我已经使用firebug广泛测试了jquery代码,并注意到了很多exception情况。 例如,我想到了我的目的,jquery代码: $('ul', curTab).***$(curTab).children(0).*** ,有时这段代码运行正常,其他时间它没有。

我一直注意到’addClass’和’removeClass’方法没有按预期添加和删除类。

if ($('.cTabActive')){...}不起作用,语法错误?
如果我这样做if ($('.cTabActive', aFileTabs)){...} ,这也不起作用……

我完全在我的智慧结束这个所谓的简单代码。 非常感谢帮助。

代码:(请查看上面的jsfiddle.net代码)

HTML

    

JAVASCRIPT

 $('.filetabs').on('click', function (e) { function abc() { if ($(curTab).hasClass ('cLastFileTabs')) { $('ul', curTab).css ({left: '-66.6%'}); $('ul',curTab).animate ({opacity: 1}, 125, 'linear'); } else { $('ul', curTab).css ({left: 0}); $('ul', curTab).animate ({opacity: 1}, 125, 'linear'); } } var aFileTabs = $('.filetabs'); var curTab = $(this); if ($('.cTabActive')) { var prevDropDown = $('.cTabActive').parent(); var prevDDChild = $(prevDropDown).children(0); $(prevDDChild).removeClass('cTabActive').addClass('cPrevTabActive'); } if ($('ul',aFileTabs).hasClass('cPrevTabActive')) { $('.cPrevTabActive',aFileTabs).animate ({opacity: 0}, 500, 'linear', function () { $('ul', aFileTabs).css ({left: '9999px'}); $('ul', aFileTabs).removeClass ('cPrevTabActive'); }); } if ($(prevDropDown).get(0) !== $(curTab).get(0)) { $(curTab).children(0).addClass ('cTabActive'); abc(); } else { return; } }); 

Kayote,

这是一个工作样本。 我添加了.length(),重写了If逻辑,并使用了setTimeout函数,因此淡入和淡出不会发生冲突。

演示
祝好运!