teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問【jQuery】matchMediaで画面幅を判定してアコーディオンの有無を切り替えたい

編集履歴

質問編集履歴

8

書式の改善

2020/10/21 07:42

投稿

ync_pp
ync_pp

スコア11

test CHANGED
File without changes
test CHANGED
@@ -8,35 +8,35 @@
8
8
 
9
9
  現在480px以下で次のようになります。
10
10
 
11
- 0. <p>クリックで<ul>にクラス"sp-accordion"を追加
11
+ 0. `p`クリックで`ul`にクラス`sp-accordion`を追加
12
-
12
+
13
- 0. "p.sp-accordion + ul"を一旦すべて非表示
13
+ 0. `p.sp-accordion + ul`を一旦すべて非表示
14
-
14
+
15
- 0. クリックした"p.sp-accordion + ul"をslideToggleで表示
15
+ 0. クリックした`p.sp-accordion + ul`を`slideToggle`で表示
16
-
16
+
17
- 0. クリックした"p.sp-accordion + ul"以外で開いている要素はslideUpで閉じる
17
+ 0. クリックした`p.sp-accordion + ul`以外で開いている要素は`slideUp`で閉じる
18
18
 
19
19
 
20
20
 
21
21
  しかし、再度リサイズしてブラウザ幅が480px以上になったときに、
22
22
 
23
- クラスの付けはずしは処理されるのですが、slideToggleは実行されてしまいます。
23
+ クラスの付けはずしは処理されるのですが、`slideToggle`は実行されてしまいます。
24
-
24
+
25
- $(this).next('.sp-accordion ul').slideToggle();にして
25
+ `$(this).next('.sp-accordion ul').slideToggle();`にして
26
-
26
+
27
- 480px以上では .sp-accordion が存在しない状態でも開閉が実行されました。
27
+ 480px以上では `.sp-accordion` が存在しない状態でも開閉が実行されました。
28
28
 
29
29
 
30
30
 
31
31
  また、そこから再度480px以下にブラウザ幅を縮めると、
32
32
 
33
- slideToggleが「開いてすぐ閉まる」という動作になり、ulが表示されたままになりません。
33
+ `slideToggle`が「開いてすぐ閉まる」という動作になり、ulが表示されたままになりません。
34
34
 
35
35
 
36
36
 
37
37
  リサイズに伴うクラスの付けはずしはなされているので、
38
38
 
39
- slideToggleの書き方や書く位置が問題なのでしょうか。
39
+ `slideToggle`の書き方や書く位置が問題なのでしょうか。
40
40
 
41
41
 
42
42
 
@@ -188,7 +188,7 @@
188
188
 
189
189
 
190
190
 
191
- 使ったことがなかったのですが、CSSのpointer-eventsであっさり実現して拍子抜けしました。
191
+ 使ったことがなかったのですが、CSSの`pointer-events`であっさり実現して拍子抜けしました。
192
192
 
193
193
  スマホ実機での検証はまだ出来ていませんが、あっさりし過ぎたのでこれで良いのか不安です。
194
194
 

7

文章の修正

2020/10/21 07:42

投稿

ync_pp
ync_pp

スコア11

test CHANGED
@@ -1 +1 @@
1
- matchMediaで画面幅を判定してslideToggleの有効無効を切り替えたい
1
+ 【jQuery】matchMediaで画面幅を判定してアコーディオンの有無を切り替えたい
test CHANGED
File without changes

6

クラス名の間違いを修正

2020/10/21 01:12

投稿

ync_pp
ync_pp

スコア11

test CHANGED
File without changes
test CHANGED
@@ -226,7 +226,7 @@
226
226
 
227
227
  if (!mql.matches) {
228
228
 
229
- $('.kugiri-under + ul').attr('style','inline-block');
229
+ $('.midashi + ul').attr('style','inline-block');
230
230
 
231
231
  }
232
232
 

5

文章の修正

2020/10/20 09:47

投稿

ync_pp
ync_pp

スコア11

test CHANGED
File without changes
test CHANGED
@@ -196,7 +196,7 @@
196
196
 
197
197
 
198
198
 
199
- 元の質問ではCSSでは動作に関わる記述を一切していませんでしたが、
199
+ 元の質問ではCSSで動作に関わる記述はしていませんでしたが、
200
200
 
201
201
  この方法ではCSSにもアコーディオンに関わる内容を記述しています。
202
202
 

4

ひとまず解決したコードを追記

2020/10/20 09:46

投稿

ync_pp
ync_pp

スコア11

test CHANGED
File without changes
test CHANGED
@@ -34,14 +34,6 @@
34
34
 
35
35
 
36
36
 
37
- addEventListenerでメディアクエリを監視していると思うのですが、
38
-
39
- addListenerで書き換えてみても同様でした。
40
-
41
- $(window).on('load resize'... でも試してみたのですが、上手くいかず...
42
-
43
-
44
-
45
37
  リサイズに伴うクラスの付けはずしはなされているので、
46
38
 
47
39
  slideToggleの書き方や書く位置が問題なのでしょうか。
@@ -56,8 +48,6 @@
56
48
 
57
49
  どうすれば望む内容を実現できるのか、お力をお貸しいただけますと幸いです。
58
50
 
59
- どうぞよろしくお願いいたします。
60
-
61
51
 
62
52
 
63
53
  ```html
@@ -155,3 +145,131 @@
155
145
  });
156
146
 
157
147
  ```
148
+
149
+
150
+
151
+ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
152
+
153
+ ### 追記です。
154
+
155
+ 別の方法でひとまず解決したため追記します。
156
+
157
+
158
+
159
+ しかし、元々の投稿内容についてのご意見も伺いたいので
160
+
161
+ まだ少し質問を閉じずにいたく思います。
162
+
163
+ 問題点やヒントをご教示いただけるようでしたら、引き続きよろしくお願いいたします。
164
+
165
+
166
+
167
+ > しかし、再度リサイズしてブラウザ幅が480px以上になったときに、
168
+
169
+ > クラスの付けはずしは処理されるのですが、slideToggleは実行されてしまいます。
170
+
171
+ > $(this).next('.sp-accordion ul').slideToggle();にして
172
+
173
+ > 480px以上では .sp-accordion が存在しない状態でも開閉が実行されました。
174
+
175
+ >
176
+
177
+ > また、そこから再度480px以下にブラウザ幅を縮めると、
178
+
179
+ > slideToggleが「開いてすぐ閉まる」という動作になり、ulが表示されたままになりません。
180
+
181
+
182
+
183
+
184
+
185
+ ---
186
+
187
+ 以下は質問したコードとは別の書き方による解決方法です。
188
+
189
+
190
+
191
+ 使ったことがなかったのですが、CSSのpointer-eventsであっさり実現して拍子抜けしました。
192
+
193
+ スマホ実機での検証はまだ出来ていませんが、あっさりし過ぎたのでこれで良いのか不安です。
194
+
195
+ 問題ある書き方でしたらこちらもご指摘いただけると幸いです。
196
+
197
+
198
+
199
+ 元の質問ではCSSでは動作に関わる記述を一切していませんでしたが、
200
+
201
+ この方法ではCSSにもアコーディオンに関わる内容を記述しています。
202
+
203
+
204
+
205
+ ```jQuery
206
+
207
+ // 解決したコード
208
+
209
+ $(function(){
210
+
211
+ var mql = window.matchMedia('(max-width: 480px)');
212
+
213
+
214
+
215
+ $('.midashi').click(function() {
216
+
217
+ $(this).toggleClass('selected');
218
+
219
+ $(this).next().slideToggle(300);
220
+
221
+ $('.midashi').not($(this)).next().slideUp(300);
222
+
223
+ });
224
+
225
+ function spSitemap(mql) {
226
+
227
+ if (!mql.matches) {
228
+
229
+ $('.kugiri-under + ul').attr('style','inline-block');
230
+
231
+ }
232
+
233
+ }
234
+
235
+ spSitemap(mql);
236
+
237
+ mql.addEventListener("change", spSitemap ,false);
238
+
239
+ });
240
+
241
+ ```
242
+
243
+ ```css
244
+
245
+ // 解決したコード
246
+
247
+ #footer .midashi {
248
+
249
+ pointer-events: none;
250
+
251
+ }
252
+
253
+ #footer .midashi + ul {
254
+
255
+ display: inline-block;
256
+
257
+ }
258
+
259
+ @media screen and (max-width: 480px) {
260
+
261
+ #footer .midashi {
262
+
263
+ pointer-events: all;
264
+
265
+ }
266
+
267
+ #footer .midashi + ul {
268
+
269
+ display: none;
270
+
271
+ }
272
+
273
+ }
274
+
275
+ ```

3

文章の修正

2020/10/20 09:45

投稿

ync_pp
ync_pp

スコア11

test CHANGED
File without changes
test CHANGED
@@ -42,9 +42,9 @@
42
42
 
43
43
 
44
44
 
45
- リサイズに伴うクラスの付けはずしはなされているので、slideToggleが問題なのでしょうか。
45
+ リサイズに伴うクラスの付けはずしはなされているので、
46
46
 
47
- 480px幅以上にリサイズしたときにslideToggleは変わらず実行できてしまうのは何故でしょうか。
47
+ slideToggleの書き方や書く位置が問題なのでしょうか。
48
48
 
49
49
 
50
50
 
@@ -54,7 +54,7 @@
54
54
 
55
55
 
56
56
 
57
- お手数ですが、お力をお貸しいただけますと幸いです。
57
+ どうすれば望む内容を実現できるのか、お力をお貸しいただけますと幸いです。
58
58
 
59
59
  どうぞよろしくお願いいたします。
60
60
 

2

タグを変更

2020/10/20 08:54

投稿

ync_pp
ync_pp

スコア11

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  フッターのサイトマップリストの項目が多いため、
4
4
 
5
- PCでは全て表示し、SPではアコーディオンにして項目ごとに開閉させたいと考えています。
5
+ PCでは全て表示し、SPではアコーディオンにして項目ごとに開閉させたいです。
6
6
 
7
7
 
8
8
 
@@ -20,7 +20,11 @@
20
20
 
21
21
  しかし、再度リサイズしてブラウザ幅が480px以上になったときに、
22
22
 
23
- クラスの付けはずしは処理されるのですが、slideToggleが有効なままです。
23
+ クラスの付けはずしは処理されるのですが、slideToggleは実行されてしまいます。
24
+
25
+ $(this).next('.sp-accordion ul').slideToggle();にして
26
+
27
+ 480px以上では .sp-accordion が存在しない状態でも開閉が実行されました。
24
28
 
25
29
 
26
30
 
@@ -40,17 +44,17 @@
40
44
 
41
45
  リサイズに伴うクラスの付けはずしはなされているので、slideToggleが問題なのでしょうか。
42
46
 
43
- PCサイズにリサイズしたときにクラスは外れるのにslideToggleが有効なままなのは何故でしょうか。
47
+ 480px幅以上にリサイズしたときにslideToggleは変わらず実行できてしまうのは何故でしょうか。
44
48
 
45
49
 
46
50
 
47
- CSSのみでは実現できたのですが、アコーディオンの開閉アニメーションが
51
+ jQueryを使わずCSSのみで開閉アニメーションも試したのですが、
48
52
 
49
- やや不自然だったのでなんとかjQueryを使って実現したいと考えています。
53
+ 動きがやや不自然だったのでjQueryを使って実現したいと考えています。
50
54
 
51
55
 
52
56
 
53
- 知識不足でお恥ずかしいのですが、お力をお貸しいただけますと幸いです。
57
+ お手数ですが、お力をお貸しいただけますと幸いです。
54
58
 
55
59
  どうぞよろしくお願いいたします。
56
60
 

1

誤字の修正

2020/10/20 08:49

投稿

ync_pp
ync_pp

スコア11

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,8 @@
1
1
  ### 実現したいこと
2
2
 
3
- フッターのサイトマップの項目が多いため、
3
+ フッターのサイトマップリストの項目が多いため、
4
4
 
5
- PCでは全て表示SPではアコーディオンにして項目ごとに開閉させたいと考えています。
5
+ PCでは全て表示し、SPではアコーディオンにして項目ごとに開閉させたいと考えています。
6
6
 
7
7
 
8
8