1

折りたたみメニューのコードを下に貼り付けるか、jsfiddleで確認します。

問題は、サブメニューがスライドアップ状態にあり、再度クリックすると停止しますが、後方にアニメーション化されていない場合です (代わりに、サブメニューは飛び出しますが、コンテナーは現在の高さを維持しています - jQuery 2.0.0 ではジャンプしません) .b1)。Firefox と Chrome でテストしても同じ結果でした。

これは jQuery のバグですか、それとも私だけですか?

更新:これは jQuery のバグだと思うので、jQueryのバグ レポートを提出しました。

更新 2 : この動作の説明とともに、Brad M の受け入れられた回答を参照してください (ただし、これは jQuery の問題であり、内部で解決する必要があると思います)。

HTML

<ul>
    <li><a href="#">Menu1</a></li>
    <li class="opened"><a href="#">Submenus 1</a>
        <ul class="submenu">
            <li><a href="#">submenu1-1</a></li>
            <li><a href="#">submenu1-2</a></li>
        </ul></li>
    <li class="closed"><a href="#">Submenus 2</a>
        <ul class="submenu">
            <li><a href="#">submenu2-1</a></li>
            <li><a href="#">submenu2-2</a></li>
        </ul></li>
    <li><a href="#">Menu4</a>
    </li>
</ul>

Javascript

var initMenu = function() {
    $("li.closed > ul.submenu").css("display", "none");

    var toggleMenu = function(li) {
        if (li.hasClass("opened") || li.hasClass("inslidedown")) {
            li.removeClass("opened inslidedown").addClass("inslideup").find("ul").first().stop(true).slideUp({
                duration: 1000,
                complete: function() {
                    li.addClass("closed").removeClass("inslideup");
                }
            });
        }
        else if (li.hasClass("closed") || li.hasClass("inslideup")) {
            li.removeClass("closed inslideup").addClass("inslidedown").find("ul").first().stop(true).slideDown({
                duration: 1000,
                complete: function() {
                    li.addClass("opened").removeClass("inslidedown");
                }
            });
        }
    };

    $("ul").on("click", "li.opened a, li.closed a, li.inslideup a, li.inslidedown a", function(e) {
        e.preventDefault();
        toggleMenu($(this).closest("li"));
    });
};

$(document).ready(function() {
    initMenu();
});
4

5 に答える 5

3

機能しない理由.slideDown()は、要素の表示が「ブロック」に設定されており、.slideDown()通常、表示が「なし」の要素で呼び出されることを意図しているためです。.hide()必要な動作を取得するには、else if ステートメントに ul 要素を含めます。

li
    .removeClass("closed inslideup")
    .addClass("inslidedown")
    .find("ul")
    .first()
    .hide()   //   <----
    .stop(true)
    .slideDown();
于 2013-02-20T02:53:32.227 に答える
0

今のところ、スライド アニメーションの進行中にクリック イベントを単純に無視する回避策を使用しています。li.inslideup a, li.inslidedown a23行目のセレクターフィルタリングパラメーターからセレクターを削除しました.on()（jQueryが修正された場合に備えて、他のコードはそのまま残しますが、単純化できます）。

回避策はjsfiddleにあります。

于 2013-02-20T17:37:11.873 に答える
0

最初の問題は、 .stop() の使用によるものです

jqueryのドキュメントによると、

.stop( [クリアキュー] [, jumpToEnd ] )

clearQueue 型: Boolean キューに入れられたアニメーションも削除するかどうかを示すブール値。デフォルトは false です。

jumpToEnd 型: Boolean 現在のアニメーションをすぐに完了するかどうかを示すブール値。デフォルトは false です。

通常、アニメーションを扱うときは .stop(false, true) を使用します。

2番目の問題については、理由は次のjquery / cssによるものです。

li.removeClass("closed inslideup")

li.closed > ul {表示: なし; }

「closed」クラスを削除すると、ul 要素の表示がデフォルトの「block」に戻されるため、即座に表示されます。要素が既に表示されているため、スライドダウン アニメーションは発生しません (ただし、コールバックは引き続き実行されます)。

于 2013-02-20T01:57:35.153 に答える
0

ここに私のバージョンがあります: http://jsfiddle.net/RF3xK/4/

Javascript:

$(document).ready(function() {
rotator($('#quotes .textItem:first'));

function rotator(elem) {
    elem.slideDown(800, function(){
      var me = $(this),
          next = me.next(),
          prev = me.prev();
      if (!next.length) {
          next = $('.textItem').first();
          next.insertAfter(me);
      }
      rotator(next);
    }).delay(800).slideUp(800);
}
});

CSS:

#quotes { background: #eee;}

#quotes .textItem { display: none; }

.hide() を document.ready イベントのこれらの要素に置き換えたことに注意してください。これは不要な JavaScript です。私が行ったように css でそれを行うことができます。これらの要素を非表示にするには、すべてのドキュメントが読み込まれるまで待つ必要があるためです。

于 2013-02-20T01:50:45.490 に答える
0

基本的に、すべての<li>ノードの下<ul>に css クラスがclosedまたはopen と表示されているかどうかを確認する必要があります。jQueryセレクターを使用してそれを実現できます。

これは、修正するための簡単で汚い方法です。より良いロジックにリファクタリングすることは間違いありません。

if ($('li[class~="opened"]').length > 0 || $('li[class~="inslidedown"]').length > 0) {
    ...
}
else if ($('li[class~="closed"]').length > 0 || $('li[class~="inslideup"]').length > 0) {
    ...
}
于 2013-02-20T01:54:08.950 に答える