Jquery - manipulating classes in a simple dropdown

All,

I previously posted a question but didnt get an answer (admittedly due to poor wording). Am re-posting after updating/ testing the code a bit more.

I want to build a simple drop down menu. Jsfiddle.

PROBLEM:

The menu drops down & upon reclicking the tab, folds away nicely. However, when the menu is down & another tab is clicks, things go pear shaped, i.e. the other menu does not drop down.

Ive tested the jquery code extensively using firebug & have noticed a lot of abnormalities. E.g. I thought for my purpose, the jquery code: $('ul', curTab).*** would be the same as $(curTab).children(0).***, sometimes this code runs fine, other times it doesn't.

Consistently Ive noticed the 'addClass' & 'removeClass' method not adding & removing the class as intended.

The if ($('.cTabActive')){...} doesn't work, syntax error?
If I do if ($('.cTabActive', aFileTabs)){...}, this doesn't work either...

Im totally at my wit's end with this supposedly simple code. Help would be greatly appreciated.

Code: (Please review the jsfiddle.net code above)

HTML:

  <div id="filemenu">                     <!-- right tabs menu -->
            <ul id="fm_ul">
                <li class="filetabs">File
                    <ul class='cDropDownItems'>
                        <li class="m_items"><a href="#"><span class="aHeading">New</span><span class="shortcutK">Ctrl-U</span></a></li>
                        <li class="m_items"><a href="#"><span class="aHeading">Open</span><span class="shortcutK">Ctrl-Z</span></a></li>
                    </ul></li><li class="filetabs">Edit
                    <ul class='cDropDownItems'>
                        <li class="m_items"><a href="#"><span class="aHeading">Undo</span><span class="shortcutK">Ctrl-M</span></a></li>

                    </ul></li><li class="filetabs cLastFileTabs">Settings
                    <ul class='cDropDownItems'>
                        <li class="m_items m_itemsCK" id="frontView"><a href="#"><img src="Img/tickB&W1.png" alt="tick" /><div class="filler"></div><span class="aHeading">Front View</span><span class="shortcutK">Ctrl-A</span></a></li>
                    </ul></li>
            </ul>
        </div>                    <!-- close -> 'filemenu' div -->
    </div>                    <!-- close -> 'menu_bars' div -->

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,

Here is a working sample. I added .length(), redid the If logic, and use the setTimeout function so fade-in and fade-out does not conflict.

Demo
Good Luck!