Question

所有

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

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

问题：

菜单下降＆amp;重新点击标签后，可以很好地折叠。但是，当菜单关闭时＆amp;另一个标签是点击，事情变成梨形，即其他菜单不会下降。

我使用firebug＆amp; amp;广泛地测试了jquery代码。注意到很多异常。例如。我想我的目的，jquery代码： $('ul', curTab).***与$(curTab).children(0).***相同，有时此代码运行正常，有时则无法运行。

我一直注意到了“addClass＆＃39; ＆安培; ＆＃39; removeClass＆＃39;方法不添加＆amp;按预期删除课程。

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

Answer 1

Kayote，

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

Demo祝你好运！

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

1 个答案: