0

全て、

以前に質問を投稿しましたが、回答が得られませんでした（確かに言い回しが悪かったため）。コードをもう少し更新/テストした後、再投稿しています。

シンプルなドロップダウンメニューを作りたいです。Jsfiddle。

問題：

メニューがドロップダウンし、タブを再度クリックすると、うまく折りたたまれます。ただし、メニューが下にあり、別のタブがクリックされると、物事は洋ナシの形になります。つまり、他のメニューはドロップダウンしません。

私はfirebugを使用してjqueryコードを広範囲にテストし、多くの異常に気づきました。たとえば、私の目的のために、jqueryコード：はと $('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 に答える