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

編集履歴

質問編集履歴

8

書式の改善

2020/10/21 07:42

投稿

ync_pp
ync_pp

スコア11

title CHANGED
File without changes
body CHANGED
@@ -3,21 +3,21 @@
3
3
  PCでは全て表示し、SPではアコーディオンにして項目ごとに開閉させたいです。
4
4
 
5
5
  現在480px以下で次のようになります。
6
- 0. <p>クリックで<ul>にクラス"sp-accordion"を追加
6
+ 0. `p`クリックで`ul`にクラス`sp-accordion`を追加
7
- 0. "p.sp-accordion + ul"を一旦すべて非表示
7
+ 0. `p.sp-accordion + ul`を一旦すべて非表示
8
- 0. クリックした"p.sp-accordion + ul"をslideToggleで表示
8
+ 0. クリックした`p.sp-accordion + ul`を`slideToggle`で表示
9
- 0. クリックした"p.sp-accordion + ul"以外で開いている要素はslideUpで閉じる
9
+ 0. クリックした`p.sp-accordion + ul`以外で開いている要素は`slideUp`で閉じる
10
10
 
11
11
  しかし、再度リサイズしてブラウザ幅が480px以上になったときに、
12
- クラスの付けはずしは処理されるのですが、slideToggleは実行されてしまいます。
12
+ クラスの付けはずしは処理されるのですが、`slideToggle`は実行されてしまいます。
13
- $(this).next('.sp-accordion ul').slideToggle();にして
13
+ `$(this).next('.sp-accordion ul').slideToggle();`にして
14
- 480px以上では .sp-accordion が存在しない状態でも開閉が実行されました。
14
+ 480px以上では `.sp-accordion` が存在しない状態でも開閉が実行されました。
15
15
 
16
16
  また、そこから再度480px以下にブラウザ幅を縮めると、
17
- slideToggleが「開いてすぐ閉まる」という動作になり、ulが表示されたままになりません。
17
+ `slideToggle`が「開いてすぐ閉まる」という動作になり、ulが表示されたままになりません。
18
18
 
19
19
  リサイズに伴うクラスの付けはずしはなされているので、
20
- slideToggleの書き方や書く位置が問題なのでしょうか。
20
+ `slideToggle`の書き方や書く位置が問題なのでしょうか。
21
21
 
22
22
  jQueryを使わずCSSのみで開閉アニメーションも試したのですが、
23
23
  動きがやや不自然だったのでjQueryを使って実現したいと考えています。
@@ -93,7 +93,7 @@
93
93
  ---
94
94
  以下は質問したコードとは別の書き方による解決方法です。
95
95
 
96
- 使ったことがなかったのですが、CSSのpointer-eventsであっさり実現して拍子抜けしました。
96
+ 使ったことがなかったのですが、CSSの`pointer-events`であっさり実現して拍子抜けしました。
97
97
  スマホ実機での検証はまだ出来ていませんが、あっさりし過ぎたのでこれで良いのか不安です。
98
98
  問題ある書き方でしたらこちらもご指摘いただけると幸いです。
99
99
 

7

文章の修正

2020/10/21 07:42

投稿

ync_pp
ync_pp

スコア11

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

6

クラス名の間違いを修正

2020/10/21 01:12

投稿

ync_pp
ync_pp

スコア11

title CHANGED
File without changes
body CHANGED
@@ -112,7 +112,7 @@
112
112
  });
113
113
  function spSitemap(mql) {
114
114
  if (!mql.matches) {
115
- $('.kugiri-under + ul').attr('style','inline-block');
115
+ $('.midashi + ul').attr('style','inline-block');
116
116
  }
117
117
  }
118
118
  spSitemap(mql);

5

文章の修正

2020/10/20 09:47

投稿

ync_pp
ync_pp

スコア11

title CHANGED
File without changes
body CHANGED
@@ -97,7 +97,7 @@
97
97
  スマホ実機での検証はまだ出来ていませんが、あっさりし過ぎたのでこれで良いのか不安です。
98
98
  問題ある書き方でしたらこちらもご指摘いただけると幸いです。
99
99
 
100
- 元の質問ではCSSでは動作に関わる記述を一切していませんでしたが、
100
+ 元の質問ではCSSで動作に関わる記述はしていませんでしたが、
101
101
  この方法ではCSSにもアコーディオンに関わる内容を記述しています。
102
102
 
103
103
  ```jQuery

4

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

2020/10/20 09:46

投稿

ync_pp
ync_pp

スコア11

title CHANGED
File without changes
body CHANGED
@@ -16,10 +16,6 @@
16
16
  また、そこから再度480px以下にブラウザ幅を縮めると、
17
17
  slideToggleが「開いてすぐ閉まる」という動作になり、ulが表示されたままになりません。
18
18
 
19
- addEventListenerでメディアクエリを監視していると思うのですが、
20
- addListenerで書き換えてみても同様でした。
21
- $(window).on('load resize'... でも試してみたのですが、上手くいかず...
22
-
23
19
  リサイズに伴うクラスの付けはずしはなされているので、
24
20
  slideToggleの書き方や書く位置が問題なのでしょうか。
25
21
 
@@ -27,7 +23,6 @@
27
23
  動きがやや不自然だったのでjQueryを使って実現したいと考えています。
28
24
 
29
25
  どうすれば望む内容を実現できるのか、お力をお貸しいただけますと幸いです。
30
- どうぞよろしくお願いいたします。
31
26
 
32
27
  ```html
33
28
  <div>
@@ -76,4 +71,68 @@
76
71
  // SP → PC → SP でulが閉じない / クリックで閉 → 開となる
77
72
  //window.onresize = spSitemap;
78
73
  });
74
+ ```
75
+
76
+ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
77
+ ### 追記です。
78
+ 別の方法でひとまず解決したため追記します。
79
+
80
+ しかし、元々の投稿内容についてのご意見も伺いたいので
81
+ まだ少し質問を閉じずにいたく思います。
82
+ 問題点やヒントをご教示いただけるようでしたら、引き続きよろしくお願いいたします。
83
+
84
+ > しかし、再度リサイズしてブラウザ幅が480px以上になったときに、
85
+ > クラスの付けはずしは処理されるのですが、slideToggleは実行されてしまいます。
86
+ > $(this).next('.sp-accordion ul').slideToggle();にして
87
+ > 480px以上では .sp-accordion が存在しない状態でも開閉が実行されました。
88
+ >
89
+ > また、そこから再度480px以下にブラウザ幅を縮めると、
90
+ > slideToggleが「開いてすぐ閉まる」という動作になり、ulが表示されたままになりません。
91
+
92
+
93
+ ---
94
+ 以下は質問したコードとは別の書き方による解決方法です。
95
+
96
+ 使ったことがなかったのですが、CSSのpointer-eventsであっさり実現して拍子抜けしました。
97
+ スマホ実機での検証はまだ出来ていませんが、あっさりし過ぎたのでこれで良いのか不安です。
98
+ 問題ある書き方でしたらこちらもご指摘いただけると幸いです。
99
+
100
+ 元の質問ではCSSでは動作に関わる記述を一切していませんでしたが、
101
+ この方法ではCSSにもアコーディオンに関わる内容を記述しています。
102
+
103
+ ```jQuery
104
+ // 解決したコード
105
+ $(function(){
106
+ var mql = window.matchMedia('(max-width: 480px)');
107
+
108
+ $('.midashi').click(function() {
109
+ $(this).toggleClass('selected');
110
+ $(this).next().slideToggle(300);
111
+ $('.midashi').not($(this)).next().slideUp(300);
112
+ });
113
+ function spSitemap(mql) {
114
+ if (!mql.matches) {
115
+ $('.kugiri-under + ul').attr('style','inline-block');
116
+ }
117
+ }
118
+ spSitemap(mql);
119
+ mql.addEventListener("change", spSitemap ,false);
120
+ });
121
+ ```
122
+ ```css
123
+ // 解決したコード
124
+ #footer .midashi {
125
+ pointer-events: none;
126
+ }
127
+ #footer .midashi + ul {
128
+ display: inline-block;
129
+ }
130
+ @media screen and (max-width: 480px) {
131
+ #footer .midashi {
132
+ pointer-events: all;
133
+ }
134
+ #footer .midashi + ul {
135
+ display: none;
136
+ }
137
+ }
79
138
  ```

3

文章の修正

2020/10/20 09:45

投稿

ync_pp
ync_pp

スコア11

title CHANGED
File without changes
body CHANGED
@@ -20,13 +20,13 @@
20
20
  addListenerで書き換えてみても同様でした。
21
21
  $(window).on('load resize'... でも試してみたのですが、上手くいかず...
22
22
 
23
- リサイズに伴うクラスの付けはずしはなされているので、slideToggleが問題なのでしょうか。
23
+ リサイズに伴うクラスの付けはずしはなされているので、
24
- 480px幅以上にリサイズしたときにslideToggleは変わらず実行できてしまうのは何故でしょうか。
24
+ slideToggleの書き方や書く位置が問題なのでしょうか。
25
25
 
26
26
  jQueryを使わずCSSのみで開閉アニメーションも試したのですが、
27
27
  動きがやや不自然だったのでjQueryを使って実現したいと考えています。
28
28
 
29
- お手数ですが、お力をお貸しいただけますと幸いです。
29
+ どうすれば望む内容を実現できるのか、お力をお貸しいただけますと幸いです。
30
30
  どうぞよろしくお願いいたします。
31
31
 
32
32
  ```html

2

タグを変更

2020/10/20 08:54

投稿

ync_pp
ync_pp

スコア11

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 実現したいこと
2
2
  フッターのサイトマップリストの項目が多いため、
3
- PCでは全て表示し、SPではアコーディオンにして項目ごとに開閉させたいと考えています。
3
+ PCでは全て表示し、SPではアコーディオンにして項目ごとに開閉させたいです。
4
4
 
5
5
  現在480px以下で次のようになります。
6
6
  0. <p>クリックで<ul>にクラス"sp-accordion"を追加
@@ -9,7 +9,9 @@
9
9
  0. クリックした"p.sp-accordion + ul"以外で開いている要素はslideUpで閉じる
10
10
 
11
11
  しかし、再度リサイズしてブラウザ幅が480px以上になったときに、
12
- クラスの付けはずしは処理されるのですが、slideToggleが有効なままです。
12
+ クラスの付けはずしは処理されるのですが、slideToggleは実行されてしまいます。
13
+ $(this).next('.sp-accordion ul').slideToggle();にして
14
+ 480px以上では .sp-accordion が存在しない状態でも開閉が実行されました。
13
15
 
14
16
  また、そこから再度480px以下にブラウザ幅を縮めると、
15
17
  slideToggleが「開いてすぐ閉まる」という動作になり、ulが表示されたままになりません。
@@ -19,12 +21,12 @@
19
21
  $(window).on('load resize'... でも試してみたのですが、上手くいかず...
20
22
 
21
23
  リサイズに伴うクラスの付けはずしはなされているので、slideToggleが問題なのでしょうか。
22
- PCサイズにリサイズしたときにクラスは外れるのにslideToggleが有効なままなのは何故でしょうか。
24
+ 480px幅以上にリサイズしたときにslideToggleは変わらず実行できてしまうのは何故でしょうか。
23
25
 
24
- CSSのみでは実現できたのですが、アコーディオンの開閉アニメーションが
26
+ jQueryを使わずCSSのみで開閉アニメーションも試したのですが、
25
- やや不自然だったのでなんとかjQueryを使って実現したいと考えています。
27
+ 動きがやや不自然だったのでjQueryを使って実現したいと考えています。
26
28
 
27
- 知識不足でお恥ずかしいのですが、お力をお貸しいただけますと幸いです。
29
+ お手数ですが、お力をお貸しいただけますと幸いです。
28
30
  どうぞよろしくお願いいたします。
29
31
 
30
32
  ```html

1

誤字の修正

2020/10/20 08:49

投稿

ync_pp
ync_pp

スコア11

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 実現したいこと
2
- フッターのサイトマップの項目が多いため、
2
+ フッターのサイトマップリストの項目が多いため、
3
- PCでは全て表示SPではアコーディオンにして項目ごとに開閉させたいと考えています。
3
+ PCでは全て表示し、SPではアコーディオンにして項目ごとに開閉させたいと考えています。
4
4
 
5
5
  現在480px以下で次のようになります。
6
6
  0. <p>クリックで<ul>にクラス"sp-accordion"を追加