ウィンドウサイズでクラス名を取りたい

Question

<script>
$(function() {
    $('.title').on('click', function() {
        $('.content').toggleClass('is-active');
    });
});
$(function() {
         var winW = $(window).width();
         if (winW >= 767 && ($('.content').hasClass('is-active') ) ) {
                $('.content').removeClass('is-active');
     };
 });
</script>

画面が767以下になると　.title をクリックできるような装飾をcssで行っています。

.title クラスを持つ要素をクリックすると .is-active というクラスを追加します（ここまではできました）

その後 .is-active をもったままウィンドウサイズを広げ767px以上になると　.is-active　が消える、という仕様にしたいのですが、うまくいきませんでした。　

何がいけないのでしょうか。よろしくお願いします。

Answer 1

<style>
.is-active{color:red}
</style>
<script>
$(function () {
  $(window).on('resize',function(){
    if($(window).width()<768){
      $('.content').removeClass('is-active');
    }
  });
  $('.title').on('click', function() {
    if($(window).width()>=768){
      $('.content').toggleClass('is-active');
    }
  });
});
</script>
<div class="title">title</div>
<div class="content">c1</div>
<div class="content">c2</div>
<div class="content">c3</div>

Comments

[rgunji]

コードまで描いていただきありがとうございます！

Answer 2

今は読み込み時の画面サイズを取得してしまうので、リサイズした時に実行するようにすればよいかと。

$(window).resize(function() {
  //リサイズされたときの処理
});

Comments

[rgunji]

ありがとうございました！
リサイズ時に処理という書き方でうまくいきました！