4

人々！

ここに聞きに来るのは初めてですが、今まで困った時はいつもここで答えてくれました。まず第一に、この素​​晴らしいコミュニティに感謝します!

それでは、問題に行きましょう：

window.resizeイベントをチェックするレスポンシブ メニューを実行しています。ブラウザの最小幅に収まると、ボタンのクリック機能が許可されます。ブラウザの幅が大きい場合、クリック機能はバインドされていません。モバイル版のボタンと同じ要素がデスクトップ版の視覚要素であるため、これを行う必要があります。

問題は、私が今持っているコードでは、ページが読み込まれると、クリック機能が正常に動作することです。しかし、ブラウザーのサイズを変更して要素をもう一度クリックすると、状態が複数回トリガーされ、関数がトリガーされていないという印象が残ることがあります。また、ブラウザのサイズを再度変更すると、前回クリックしたときよりもクリック機能がトリガーされます。本当に忌々しい。

何が起こっているのかを理解するのを助けるために、簡単な例を作りました。簡単なコードは次のとおりです（クリック機能の問題を確認するためだけに）：

HTML:

<ul>
    <li><span class="sub-toggle">Testing 01</span></li>
    <li><span class="sub-toggle">Testing 02</span></li>
    <li><span class="sub-toggle">Testing 03</span></li>
</ul>

CSS:

.sub-toggle{
    display:block;
    padding: 20px;
}

.sub-toggle.active{
    background-color: #ffcc00;
    color: #fff;
}

Javascript (jQuery):

jQuery(function($){

    var i = 1;

    // check if browser size is compatible with click event
    onResize = function() {

        // if browser size is ok, do the click function
        if($(window).width() <= 480){

            // click function
            $('.sub-toggle').click(function(){

                alert('click');

                if($(this).hasClass('active')){
                    alert('active');
                    $(this).removeClass('active');
                } else {
                    $(this).addClass('active');
                }

            });     

        } else{
            // if browser size is greater than expected, unbind the click function
            $('.sub-toggle').removeClass('active').unbind('click');
        }

        // just checking how many times the resize function is triggered 
        console.log('resize: '+ i);
        i++;

    }

    $(document).ready(onResize);

    var timer;

    $(window).bind('resize', function(){
        timer && clearTimeout(timer);
        timer = setTimeout(onResize, 500);
    });

});

(一部の不要なコードを削除するために編集されました)

実際の動作を確認したい場合は、Fiddle を作成しました (出力フレームのサイズを変更して動作を確認してください): http://jsfiddle.net/C7ppv/1/

私は JavaScript の知識があまりないので、本当にばかげたことを見落としているのかもしれません。しかし、私がやりたいことは、複数のサイズ変更があっても、クリック イベントを 1 回トリガーすることです。

私の問題をうまく説明できれば幸いです。検索しましたが、この問題の解決策が見つかりませんでした (または、何を探すべきかがよくわからなかっただけかもしれません)。

どんな助けでも大歓迎です！

4

3 に答える 3

7

コードは現在click、メソッドが呼び出されるたびに新しいイベントをバインドしonResize、ウィンドウの幅は以下です480px。

新しいイベントをバインドする前に、要素の既存のclickイベントをバインド解除するだけです。.sub-toggle

$('.sub-toggle').unbind('click').click(function() {
    ...
});

デモ

于 2013-03-08T23:36:25.490 に答える
5

このresizeイベントは、サイズ変更中に複数回トリガーされ、新しいクリック ハンドラーをバインドするたびにトリガーされます。私の提案: サイズ変更ハンドラーの外側から 1 回だけバインドし、サイズ変更中にフラグを設定して、クリック ハンドラーに何かを行う必要があるかどうかを知らせます。

resizeそうすれば、やっているようにwithの処理を​​延期する必要さえありませんsetTimeout。

デモ

jQuery(function($){

    var i = 1;

    // flag to allow clicking
    var clickAllowed = true;

    // click function
    $('.sub-toggle').click(function(){
        if(clickAllowed) {
            alert('click');

            if($(this).hasClass('active')){
                alert('active');
                $(this).removeClass('active');
            } else {
                $(this).addClass('active');
            }
        }
    }); 

    // check if browser size is compatible with click event
    onResize = function() {

        //if browser size is ok, do the click function
        if($(window).width() <= 480){
            clickAllowed = true;
        }
        else{
            // if browser size is greater than expected, disallow clicking
            clickAllowed = false;

        }

        // just checking how many times the resize function is triggered 
        console.log('resize: '+ i);
        i++;

    }

    $(document).ready(onResize);

    var timer;
    $(window).bind('resize', onResize);
});
于 2013-03-08T23:45:51.957 に答える
2

$('.sub-toggle').click(function(){...}onResize イベント ハンドラーの外に移動しif($(window).width() <= 480){...}、クリック ハンドラーに移動します。

于 2013-03-08T23:43:30.610 に答える