0

http://jsfiddle.net/uTV5k/19/

こんにちは、

モバイル サイトで以下のスクリプトを使用しています。シミュレートされたスクリプトとマークアップの jsfiddle を参照してください。

以下のスクリプトはまさに私のモバイル サイトにあるもので、js フィドルはその複製です。

jsfiddle では、クリックの切り替えは正常に機能します。最初のクリックでアニメーションが開き、2 回目のクリックでアニメーションが閉じます。

私のモバイルサイトの問題は、最初のクリックでアニメーションが開き、2 回目のクリックなしですぐに 2 番目のアニメーションが実行されることです。しかし、フィドルでは問題なく動作します。 


$(window).load(function(){

    $(window).bind("orientationchange resize", function(e) {

        $('.home-mod').each(function() {

            var homeModule  = $(this).height(),
                homeTitle   = $(this).find('.home-title-button').outerHeight(),
                homeStart   = homeModule - homeTitle,
                homeOpen    = false;

            $(this).find('.mod-info').css("top", homeStart + "px");

            $(this).on('click', function () {

                if (homeOpen) {

                    // second click alternation
                    $(this).find('.mod-info').animate({ top: homeStart + "px" });
                    homeOpen = false;

                } else {

                    // first click alternation
                    $(this).find('.mod-info').animate({ top: 0 });
                    homeOpen = true; 

                }
            });

        }); 

    }).trigger("resize");

});



なぜこれが起こるのか、私には本当にわかりません。iScroll でこれを使用しても問題は発生しませんか?

前もって感謝します

4

2 に答える 2

3

まず、ウィンドウの読み込みが発生します

あなたが呼んでいる

.trigger("resize");

クリックするとバインドがアクティブになります。

later on-ウィンドウのロードが再び発生した場合-コードを再トリガーします-クリックを再バインドします

于 2012-02-06T12:01:55.770 に答える
0

フィドルコードとライブコードの違いは、サイズ変更/方向付けハンドラーの存在です。

他のすべてのコードはその中にあります。つまり、サイズ変更ハンドラーを実行するたびに実行されます。http://jsfiddle.net/uTV5k/20/は、そのハンドラーが戻ってきたフィドルの変形です。誤動作します。

これを修正するには、を使用して新しいクリックハンドラーを追加する前に、古いクリックハンドラーを削除します.off('click')。

このフィドルにはこのアップデートが含まれており、再び動作するようです：http: //jsfiddle.net/uTV5k/21/

この問題を修正するもう1つの（そしておそらくより良い）方法は、サイズ変更時に必要な値を再計算し、それらをよりグローバルに保存することです。次に、クリック関数を1回追加して、これらのグローバル値を参照できます。これははるかに大きなコードの書き直しであり、私はあなたの問題を浮き彫りにするために非常に簡単な修正を行いました。

于 2012-02-06T12:17:21.413 に答える