0

長いタイトルで申し訳ありませんが、ゆっくりと私を怒らせている問題を解決するためにあなたの助けを探しています.

特定の状況下で関数を実行できる方法を見つけようとしています。それらの状況は次のとおりです。

  • ページの読み込み時にウィンドウの幅が特定の値 (496) 以下の場合、関数がトリガーされます。
  • ウィンドウが上記の値以下にサイズ変更された場合に関数が実行されます
  • ウィンドウの幅がページの読み込み時またはウィンドウのサイズ変更時に上記の値よりも大きい場合、関数は実行されません

それがあなたのいずれかを混乱させた場合は、お詫びします。これは、これまでのところ、さらに説明するのに役立つコードです。

jQuery:

if($(window).width() < 496 || ($(window).resize() && $(window).width() < 496)) {
    add_cta_arrows_for_mobile();
}

function add_cta_arrows_for_mobile() {
    $("#hori_ctas h4").addClass('arrow-down');

    $("#hori_ctas h4").click(function() {

        if($(this).attr('data-state') == 'dropped') {
            $(this).removeAttr('data-state').removeClass('arrow-up').addClass('arrow-down');
        } else {
            $(this).attr('data-state','dropped').removeClass('arrow-down').addClass('arrow-up');
        }
        $(this).next().children('div').slideToggle(800);
    });
}

html や CSS は含まれていません。これは単にデザインよりも機能的であるため、その必要性を感じていないからです。

時間を割いて助けてくれた人には、あらかじめ感謝します。

4

2 に答える 2

1 
// cache relevant elements
var $win = $(window),
    $target = $("#hori_ctas"),
    $titles = $target.find('h4');

function add_cta_arrows_for_mobile() {
    // add arrow and event handler class, remove otherwise
    if($win.innerWidth() < 496) {
        $titles.addClass('clickable arrow-down');
    } else {
        $titles.removeClass('clickable arrow-down');
    }
}

// no need to bind event handler on every resize, do it once with delegation
$target.on('click', '.clickable', function() {
    var $this = $(this),
        state = $this.data('state');

    // toggle class and state
    $this
        .data('state', state == 'dropped' ? '' : 'dropped')
        .toggleClass('arrow-up arrow-down')
        .next().children('div')
            .slideToggle(800);
});

$win.on('resize', function() {
    add_cta_arrows_for_mobile()
});

// initially set arrows
add_cta_arrows_for_mobile();

注: ウィンドウのサイズ変更時に常にイベント ハンドラーをバインドおよびバインド解除するのではなく、委譲を使用して関数をクラスにバインドし、このクラスを切り替えます。

于 2013-03-20T10:29:14.350 に答える
0

次のコードを試してください。 

 function add_cta_arrows_for_mobile() {


                $("#hori_ctas h4").addClass('arrow-down');

                $("#hori_ctas h4").click(function() {

                    if($(this).attr('data-state') == 'dropped') {
                        $(this).removeAttr('data-state').removeClass('arrow-up').addClass('arrow-down');
                    } else {
                        $(this).attr('data-state','dropped').removeClass('arrow-down').addClass('arrow-up');
                    }
                    $(this).next().children('div').slideToggle(800);
                });
            }

        var $win = $(window);

        $win.load(function(){

        if($win.width() <= 496 ) {
               add_cta_arrows_for_mobile();
        }else{

         $("#hori_ctas h4").unbind('click'); 
        }

            });

            $win.resize(function(){



            if($win.width() <= 496 ) {
                add_cta_arrows_for_mobile();
            }else{


                $("#hori_ctas h4").unbind('click');


}


            });

編集：if($win.width() <= 496 )条件を 追加しました

EDIT2： unbindウィンドウ幅=>496の場合にクリックイベントを編集

于 2013-03-20T10:15:44.053 に答える