0

全部，

我之前发布了一个问题，但没有得到答案（诚然是由于措辞不佳）。在更新/测试代码后重新发布。

我想建立一个简单的下拉菜单。提琴。

问题：

菜单下拉并在重新单击选项卡时很好地折叠起来。然而，当菜单被关闭并且另一个选项卡被点击时，事情会变成梨形，即另一个菜单不会下拉。

我已经使用 firebug 对 jquery 代码进行了广泛的测试，并且注意到了很多异常。例如，出于我的目的，我认为 jquery code: $('ul', curTab).***将与 相同$(curTab).children(0).***，有时此代码运行良好，有时则不然。

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

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

对于这个所谓的简单代码，我完全束手无策。帮助将不胜感激。

代码：（请查看上面的 jsfiddle.net 代码）

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;
    }  });
4

1 回答 1

1

凯约特，

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

演示
祝你好运！

于 2012-05-17T07:35:25.870 回答