Jquery - 在简单的下拉菜单中操作类 [英] Jquery - manipulating classes in a simple dropdown menu

问题描述

全部

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

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

问题：

菜单下拉&在收起标签后，很好地折叠。但是，当菜单关闭时另一个标签是点击，事情变成梨形，即其他菜单不会下拉。

我已经使用firebug&注意到很多异常。例如。我以为我的目的，jquery代码：
$（'ul'，curTab）。*** 将与 $（curTab）.children（0）。*** ，有时这段代码运行正常，其他时候没有。

我注意到'addClass'& 'removeClass'方法不添加&删除课程。

if（$（'。cTabActive'））{...} 不工作，语法错误？

如果我执行 if（$（'。cTabActive'，aFileTabs））{...} ，这不行。

完全以我这个简单的代码我的智慧结束了。帮助将不胜感激。

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

HTML ：

 < div id =filemenu> <！ - 右标签菜单 - > 
< ul id =fm_ul> 
< li class =filetabs>文件
< ul class ='cDropDownItems'> 
< li class =m_items>< a href =＃>< span class =aHeading>新< / span>< span class =shortcutK> Ctrl -U< /跨度>< / A>< /锂> 
< li class =m_items>< a href =＃>< span class =aHeading>打开< / span>< span class =shortcutK> Ctrl -Z< /跨度>< / A>< /锂> 
< / ul>< / li>< li class =filetabs>编辑
< ul class ='cDropDownItems'> 
< li class =m_items>< a href =＃>< span class =aHeading>撤消< / span>< span class =shortcutK> Ctrl -M< /跨度>< / A>< /锂> 
 
< / ul>< / li>< li class =filetabs cLastFileTabs>设置
< ul class ='cDropDownItems'> 
< li class =m_items m_itemsCKid =frontView>< a href =＃>< img src =Img / tickB& W1.pngalt =tick < div class =filler>< / div>< span class =aHeading>前视图< / span>< span class =shortcutK> Ctrl-A< / span> < / A>< /锂> 
< / ul>< / li> 
< / ul> 
< / div> <！ -  close  - > 'filemenu'div  - > 
< / div> <！ -  close  - > 'menu_bars'div  - > 
  

JAVASCRIPT ：

（$）$（$）（$（$）$（$）$（$） .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 = $如果（$（'ul'，aFileTabs）.hasClass（'），则
$（prevDDChild）.removeClass（'cTabActive'）; addClass（'cPrevTabActive' 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函数，所以淡入淡出不会冲突。

演示
祝你好运！

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!

这篇关于Jquery - 在简单的下拉菜单中操作类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！