teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップCSS3に関する質問「指定したサイズ以下限定」でjQueryを作動させたい

編集履歴

回答編集履歴

4

追加分の処理に対してのコメントアウトを追加

2019/06/10 16:15

投稿

miyabi_pudding
miyabi_pudding

スコア9572

answer CHANGED
@@ -54,9 +54,12 @@
54
54
  $(this).find(".attend-tittle").css("border-bottom","2px solid black");
55
55
  }
56
56
  });
57
+ // 一番うえのクリックが、動作不良になっていたため、一旦処理をコメントアウト。setTimeoutや、jQueryのdelay()メソッドをうまく使えば、うまく動作するかもしれない。
57
58
  //$(".attend-contents").eq( 0 ).click();
58
59
  } else {
60
+ // 念の為、この条件下でも、クリックイベントを削除
59
61
  $( ".attend-contents" ).off('click').each(function(){
62
+ // 各クラス、CSSのクリアを行なった
60
63
  $( this ).removeClass( "open" ).find( ".yazirushi2" ).css( "transform", "" );
61
64
  $( this ).find(".attend-tittle").css("border-bottom","");
62
65
  $( this ).find(".attend-text").css("display","");

3

CSSのクリアの処理を追加

2019/06/10 16:14

投稿

miyabi_pudding
miyabi_pudding

スコア9572

answer CHANGED
@@ -54,7 +54,14 @@
54
54
  $(this).find(".attend-tittle").css("border-bottom","2px solid black");
55
55
  }
56
56
  });
57
- $(".attend-contents").eq( 0 ).click();
57
+ //$(".attend-contents").eq( 0 ).click();
58
+ } else {
59
+ $( ".attend-contents" ).off('click').each(function(){
60
+ $( this ).removeClass( "open" ).find( ".yazirushi2" ).css( "transform", "" );
61
+ $( this ).find(".attend-tittle").css("border-bottom","");
62
+ $( this ).find(".attend-text").css("display","");
63
+ });
64
+
58
65
  }
59
66
  }
60
67
  // 初回実行

2

インデントが不揃いだったので、整頓した

2019/06/10 15:55

投稿

miyabi_pudding
miyabi_pudding

スコア9572

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

1

jsの実コードを記載

2019/06/10 13:34

投稿

miyabi_pudding
miyabi_pudding

スコア9572

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