SPレイアウトの時だけアコーディオン機能を実行したい

Question

#やりたいこと
タイトルのとおりです。
レスポンシブサイトにおいて、639px以下のSPレイアウト時のみ、
通常のコンテンツをアコーディオン開閉式UIに変更するようにしたい。

#現状のソースコード

<div class="js-accordion">
  <div class="js-acrTitle sp">【アコーディオンタイトル：ボタン機能】</div>
  <div class="js-acrBody">
   【アコーディオンの中身】
  </div><!-- /.js-acrBody -->
</div><!-- /.js-accordion -->

.sp {display:none;}
@media screen and (max-width: 639px){
  .sp {display:block;}
  .js-acrBody {display:none;}
}

$(function(){
  accrdion();
});

function accordion() {
    var accordionOffset = [];
    var $accordion = $(".js-accordion");

		
    var Accordion = {
        getaccordionOffset: function () {
            $accordion.each(function (i) {
                accordionOffset[i] = $(this).offset().top;
            });
        },
        hdlClick: function (Selector) {
            var num = $(".js-acrTitle").index(Selector);
            $("body,html").stop().animate({"scrollTop": accordionOffset[num] - 50}, 400, function () {
                Accordion.getaccordionOffset();
            });
            if (Selector.hasClass("op")) {
                Selector.removeClass("op");
                Selector.next().stop().slideUp(400, function () {
                    Accordion.getaccordionOffset();
                });
            } else {
                Selector.next().stop().slideDown(400, function () {
                    Accordion.getaccordionOffset();
                });
                Selector.addClass("op");
            }
        }
    }

    Accordion.getaccordionOffset();
    $(".js-acrTitle")
        .on("click",function () {
        Accordion.hdlClick($(this));
    });
}

#問題となっているところ
アコーディオンを開閉するタイトル部.js-acrTitleは、もともとPCレイアウト時は不要で、
SPレイアウト時だけ表示すればよかったので、最初は上記コードでうまく行っていました。
（PCレイアウト時にはそもそもトリガーとなる要素が無いので機能しない）
ところが、別のページでPCレイアウト時には開閉トリガー機能の無い見出しとして.js-acrTitleを表示し、
639px以下になったところでアコーディオンになるようにする、という変則バージョンのモジュールが出てきてしまいました。
上記スクリプトでは.js-acrTitleをクリックしたら開閉してしまうので、なんとかしてアコーディオン機能を639px以下の時だけに限定しようとしてif文を書いてみたりもしたのですが、うまくいきませんでした。

#実現したい仕様
１．PCレイアウト時にはただのコンテンツ
２．SPレイアウト時（639px以下）の時はアコーディオン機能
３．PCブラウザでブレイクポイントをまたぐ形で画面幅を変更した際にもアコーディオン機能の実行／停止が正しく判定されるようにする
4.SPでアコーディオン操作で.js-acrBodyを閉じた状態でPCレイアウトに変更した際も、表示状態を全てリセットして元に戻す
5.リサイズ時の判定・実行は、リサイズイベントが完了した時に1度だけ行われるように処理する（iPhoneのスクロール対策）

うまくいかなくて消してしまったので実際のコードを掲載できないのですが、上記仕様の内、1,2,4,5は実現できていました。
ただ、3の時にPC（アコーディオン無し）→SP（アコーディオン実行）は実現できましたが、一旦SPでアコーディオン機能を実行した後、ふたたびPCレイアウトに戻った時にアコーディオン機能を停止することがどうしてもできませんでした。

#教えてほしいこと
基本的にクリックしたタイミングとか、リサイズしたタイミングで画面幅$(window).width()を取得して、if文で条件分岐、ということをやっていたのですが、やりたい機能全体を通した場合のロジックがうまく作れないので、
どのタイミングで何を取得し、どう判定して何を実行したら良いのか というロジック部分を中心にご教授いただけますと大変助かります。
また、もし画面幅の取得で分岐する以外のもっとスマートな実装方法があるのだとしたら、知りたいです。
（※PC用の見出しとSP用の見出しを重複記述して表示／非表示切り替える手法はNGです）

長々と申し訳ありませんが、どなたかアドバイスいただけますと助かります。
よろしくお願い申し上げます。

Answer 1

リサイズ時に取得しておいて、クリック時に判断すれば良いと思います。また、私は画面幅で切り替えればよいと思います。特に画面幅に合わせたデザインにしているのであれば、デザインの切り替わりと機能の切り替わりは同じタイミングでよいと思います。

var sp_flag = false;
// リサイズ時に取得しておいて、
$( window ).on( 'load resize', function() {
	sp_flag = ( window.matchMedia( '(max-width:639px)' ).matches ); // IE10+
} );
$( '.js-acrTitle' ).on( 'click', function() {
	// クリック時に判断すれば良いと思います。
	if ( sp_flag ) {
		Accordion.hdlClick( $( this ) );
	}
} );

【Media Queries（メディアクエリ）とJavaScriptの連携について - Qiita】
http://qiita.com/r_abe01/items/a3a2e94b5162d949037b

【window.matchMedia - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia

Comments

[aKusano]

ご回答有り難うございます。
まだ試せていないのですが、確認次第ご報告させていただきたいと思います。
window.matchMedia()というのは初めて見ました。
参考サイトの方も情報ありがとうございます。参考にさせていただきます。

が、うっかりしていましたがこの案件、IE9が対象に入っていたりします。。
window.matchMediaはIE10+でないと効かないんですよね？
IE9も対象とした場合はUA分岐して別の方法で対処、でしょうか？

[kei344]

var w = window.innerWidth ? window.innerWidth : $( window ).width();
sp_flag = ( w <= 639 );

普通に画面幅を取る、でいいと思います。両方使う（ matchMedia を基本に、無ければ幅で）という手段もありますね。

if ( window.matchMedia ) {
sp_flag = ( window.matchMedia( '(max-width:639px)' ).matches ); // IE10+
} else {
var w = window.innerWidth ? window.innerWidth : $( window ).width();
sp_flag = ( w <= 639 );
}

[aKusano]

なるほど。ちょっとやってみますね。
いつもありがとうございます！

[aKusano]

ご報告遅くなりまして申し訳ありません。
教えていただいたロジックで組んでみたところ、無事実現したい仕様を実装することができました！
正直まだどうしてこのロジックならうまくいくのかちゃんと理解はできていないのですが、
この後じっくり考えてみたいと思います。

取り急ぎ御礼とご報告まで。
ありがとうございました！