Help us understand the problem. What is going on with this article?

レスポンシブデザインで、PCデバイスとSPデバイスで処理を切り替える時のjQueryの書き方

課題

いつもレスポンシブの案件制作してて、ハンバーガーメニューを実装することがよくあるんですね。
よくあるデザインが、PCの時にはヘッダーにリンクが横並びに並んでて、
SPのときはそのリンクがハンバーガーメニュー内に全部収納されるパターン。

で、あとで文言修正とかきたら面倒臭いから、コード出し分けはせず、
ulタグで作って、SPのときはそいつをslideToggleさせるみたいな処理を実装しています。

で、こういう時以下のような問題が生じます。
PCで見ている時、SPのウインドウ幅にします。
そして、ハンバーガーを開いて、閉じます。
次に、PCのウインドウ幅に戻すと、なんとナビが全部消えているんですよ。怖いなー怖いなー
当然です。slideToggle一回発動させちゃうと、ハンバーガー閉じるとdisplay: none;が付与されてしまいますから。
この例に限らず、こういった問題はよく生じると思います。
そこで、次のようなコードを書いて見たんですね。

解決法1(失敗ケース)

$(function(){
   $('window').on('resize',function(){
      var windowWidth = $('window').width();
      if (windowWidth >= //SPのブレークポイント ) {
         //SPの処理
      } else {
         //PCの処理
      }
   }).trigger('resize');
});

以上のような書き方をしたのですが、
こうしたらリサイズするたびに処理が走ってしまいます。
うーん、困った。
私が実現したいのは、
「ブレークポイントを通過した時のみに処理を実行する」ことです。
つまり、いくらリサイズしたって、
①PCからSPに切り替わるとき
②SPからPCに切り替わるとき
以上の2回だけ処理が走っていればよいのです。
よって以下のような記述になりました。

解決法2(成功ケース)

$(function(){
    var breakpoint = 767;
    var lastWW = $('window').width();

    if (lastWW <= breakpoint) {
        //SPの処理
    } else {
        //PCの処理
    }

    $('window').on('resize', function() {
        var currentWW = $('window').width();

        if (lastWW <= breakpoint && breakpoint < currentWW) {
            //PCの処理
        } else if (currentWW <= breakpoint && breakpoint < lastWW) {
            //SPの処理
        }

        lastWW = currentWW;
    });
});

上記のようになりました。
肝はlastWW = currentWWのところだと思っていて、
要は最後に処理が走ったときのデバイス幅を変数lastWWに保存しておくことってことですね。
この書き方で結構汎用的に利用しております。

まとめ

そもそもユーザーエージェント切り替えならばこんなのいらないのですが、
まだまだmedia queryで切り替える案件が大半だったので、よく使います。
もっとよいやり方あればご教示くださいませ。
というか、一回SP幅にして、そしてPC幅に戻してサイトを閲覧するエキセントリックなユーザーいるの?

yukiTTT
Frontend Developer 文系の営業出身ですが、がんばってます
plus-d
プラスディーは「Growth the Client Business with CREATIVE.」を掲げ、企業の事業成長に寄与していきます
https://plus-d.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした