「指定したサイズ以下限定」でjQueryを作動させたい

デバイス：MacBook Pro

まず、HTML/CSS/jQueryのコードは下記になります。

※jQueryはhtmlの<head>内に、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

↑このように取り込んでおります。

コード

htmlの<body>内

HTML
1<div class="attend">
2  <div class="attend-contents">
3    <div class="attend-icon">
4      <p class="attend-tittle">タイトル</p>
5    </div>
6    <div class="attend-text min-768">
7      <p>テキストテキストテキストテキストテキストテキストテキスト</p>
8    </div>
9    <div class="yazirushi2"></div>
10  </div>
11  <div class="attend-contents">
12    <div class="attend-icon">
13      <p class="attend-tittle">タイトル</p>
14    </div>
15    <div class="attend-text min-768">
16      <p>テキストテキストテキストテキストテキストテキストテキスト</p>
17    </div>
18    <div class="yazirushi2"></div>
19  </div>
20  <div class="attend-contents">
21    <div class="attend-icon">
22      <p class="attend-tittle">タイトル</p>
23    </div>
24    <div class="attend-text min-768">
25      <p>テキストテキストテキストテキストテキストテキストテキスト</p>
26    </div>
27    <div class="yazirushi2"></div>
28  </div>
29  </div>
30
31<script src="jquery_test.js"></script>

css
1.attend{
2  padding: 60px 0 35px;
3}
4.attend-contents{
5  display: flex;
6  justify-content: space-between;
7  padding: 30px 30px 20px 80px;
8  width: 95%;
9  margin: 5px auto;
10  background-color: #FEF5E0;
11  border-radius: 4px;
12  letter-spacing: 2px;
13  font-weight: bold;
14}
15.attend-text{
16  width: 80%;
17}
18
19/*767px以下のcss  */
20@media (max-width:767px) {
21  .min-768{
22    display: none;
23  }
24  .attend-image{
25    display: none;
26  }
27  .attend-contents{
28    flex-direction: column;
29    position: relative;
30    padding: 10px 15px;
31  }
32  .yazirushi2{
33    position: absolute;
34    top: 50%;
35    right: 15px;
36    width: 11px;
37    height: 11px;
38    display: inline-block;
39    border-right: 4px solid black;
40    border-bottom:4px solid black;
41    transform: rotate(45deg);
42  }
43  .yazirushi2{
44    display: flex;
45    align-items: center;
46  }
47  .attend-text{
48    width: 95%;
49    margin-top: 20px;
50  }
51  .attend-icon {
52    width: 100%;
53    display: flex;
54    align-items: center;
55  }
56}

jQuery

$(function(){
  var windowWidth = $(window).width();
  var windowSm = 767;
  if (windowWidth <= windowSm){
    $( ".attend-contents" ).click( function(){
      $( this ).find( ".attend-text" ).slideToggle();
      if( $( this ).hasClass( "open" ) ){
        $( this ).find( ".yazirushi2" ).css( "transform", "rotate( 45deg )" );
        $( this ).removeClass( "open" );
        $(this).find(".attend-tittle").css("border-bottom","none");
      } else {
        $( this ).find( ".yazirushi2" ).css( "transform", "rotate( 225deg )" );
        $( this ).addClass( "open" );
        $(this).find(".attend-tittle").css("border-bottom","2px solid black");
      }
    });
  $(".attend-contents").eq( 0 ).click();  
  };
});

質問

レスポンシブ時にjQueryを作動させる方法で調べた結果、このようにしたのですが、
これだと、**ブラウザ（Chrome）でPCサイズ（1200pxなど）のまま更新**すると、
画面幅を767px以下に縮小した場合でも、クリックイベントが起こりません。

※PC画面サイズで更新↓

※その後、更新せずにそのまま画面幅を767px以下に↓（jQueryが効いていない）

ですが、**あらかじめ画面幅を767px以下に縮小させた状態で更新**すると、
クリックイベントは反映されますが、そのまま画面幅を767pxより大きくすると、
クリックイベントが引き継がれているままになってしまいます。

※767px以下に縮小させた状態で更新↓

※その後、更新せずにそのまま画面幅を767pxより大きくする↓（このままクリックするとテキストが消える状態）

要は、「767px以下のみでクリックイベントを作動させたい」だけです。

この↓型を試したのですが、elseをつけないからなのでしょうか？


var windowWidth = $(window).width();
var windowSm = 767;
if (windowWidth <= windowSm) {
    //横幅640px以下のとき（つまりスマホ時）に行う処理を書く
} else {
    //横幅640px超のとき（タブレット、PC）に行う処理を書く
}

どこが間違えているのか、教えて頂けますと幸いです。

それとも、これはこれで正しく作動していると言う事なのでしょうか？
jQueryはあくまで、
「画面幅を一つのデバイスで縮小したり、拡大したりする事を前提としていなく、最初に開いた画面サイズが〇〇pxだったら...が前提」なのでしょうか？
もしその論理なら、このコードは正しいのですが...。

一度PC画面サイズで更新し、
そのまま画面幅を767px以下に縮小した際に作動するような処理はあるのでしょうか？

※追記2019.6.11 0:28　補足
上記には
「767px以下のみでクリックイベントを作動させたい」
こうあります。
これは、
「767px以下のみでクリックイベントを作動させたい且つ、それ以外(768px以上)は作動させない」
と言う意味になります。
その為、タイトルも「指定したサイズ以下限定」と言う表現にしました。

行動規範の内容に同意します

回答3件

ベストアンサー

jQueryにおいても、ネイティブにおいても、
画面リサイズ時に、処理を行うイベントは用意されております。

【jQuery入門】resize()によるウィンドウリサイズの方法まとめ！

これらを使えば、
今書かれている、処理と同じ処理を、リサイズイベントの中で書けば、
リサイズするたびに、画面サイズの条件に合えば実行と、できるでしょう。

下記でいかがでしょうか。
各所で、コメントアウトにて、こうした、などの記載をしています。

javascript
1$(function(){
2
3// 処理が頻発しないようにするため、タイマーを用意
4let resizeTimer = null;
5// 変数を外側においた
6let windowWidth = $(window).width();
7const windowSm = 767;
8
9
10$(window).resize(function() {
11  // resizeのたびに、数値を更新
12  windowWidth = $(window).width();
13  // タイマーが生きていたら、クリア
14  if (resizeTimer) {
15    clearTimeout(resizeTimer);
16  }
17  // リサイズのタイミングを変えたければ、タイマーの時間を調整
18  resizeTimer = setTimeout(function(){
19    // イベント設定用関数の実行
20    addClickevents();
21  }, 100);
22
23});
24
25// イベントを設定する関数
26function addClickevents(){
27  // クリックイベントは、いずれの場合も、一旦削除する
28  $( ".attend-contents" ).off('click');
29  if (windowWidth <= windowSm){
30    // 横幅が、設定以下である
31    $( ".attend-contents" ).click( function(){
32      // 二重三重発生を防ぐためにストップを挟む
33      $( this ).find( ".attend-text" ).stop().slideToggle();
34      if( $( this ).hasClass( "open" ) ){
35        $( this ).find( ".yazirushi2" ).css( "transform", "rotate( 45deg )" );
36        $( this ).removeClass( "open" );
37        $(this).find(".attend-tittle").css("border-bottom","none");
38      } else {
39        $( this ).find( ".yazirushi2" ).css( "transform", "rotate( 225deg )" );
40        $( this ).addClass( "open" );
41        $(this).find(".attend-tittle").css("border-bottom","2px solid black");
42      }
43    });
44    // 一番うえのクリックが、動作不良になっていたため、一旦処理をコメントアウト。setTimeoutや、jQueryのdelay()メソッドをうまく使えば、うまく動作するかもしれない。
45    //$(".attend-contents").eq( 0 ).click();
46  } else {
47    // 念の為、この条件下でも、クリックイベントを削除
48    $( ".attend-contents" ).off('click').each(function(){
49      // 各クラス、CSSのクリアを行なった
50      $( this ).removeClass( "open" ).find( ".yazirushi2" ).css( "transform", "" );
51      $( this ).find(".attend-tittle").css("border-bottom","");
52      $( this ).find(".attend-text").css("display","");
53    });
54    
55  }	
56}
57// 初回実行
58addClickevents();
59
60  
61});

投稿2019/06/10 08:33

編集2019/06/10 16:15

miyabi_pudding

総合スコア9528

miyabi_pudding

2019/06/10 08:35

ちなみに、PCブラウザではもちろんですが、スマホのラウンドスケープモードに変えた時、戻した時も、このリサイズイベントは実行されます。

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

コード

質問

関連した質問