回答編集履歴

3

コメントを受けて追記2

2020/04/03 10:22

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア35860

test CHANGED
@@ -31,3 +31,49 @@
31
31
 
32
32
 
33
33
  以上、ご不明の点がありましたら、コメント欄にてご連絡ください。
34
+
35
+
36
+
37
+ ### コメントを受けて追記2
38
+
39
+
40
+
41
+ これは例ですが、
42
+
43
+ ```js
44
+
45
+ $(function() {
46
+
47
+ $(".gnavi14MenuItem._trigger, .gnavi14ChildMenuDeco").on("click", function() {
48
+
49
+ $(".gnavi14ChildMenu", this).toggleClass('open');
50
+
51
+ })
52
+
53
+ });
54
+
55
+ ```
56
+
57
+ とすれば、
58
+
59
+ たとえば、SPでオープンになっていてホバーしている状態は、
60
+
61
+ ```css
62
+
63
+ @media screen and (max-width: 768px) {
64
+
65
+ .gnavi14MenuItem._trigger:hover .gnavi14ChildMenu.open{
66
+
67
+ }
68
+
69
+ }
70
+
71
+ ```
72
+
73
+ でスタイルをつけられますよね?
74
+
75
+
76
+
77
+ 状態が2*2*2=8通りなので、全部列挙したとしても8パターンで済みます。
78
+
79
+ 実際には、SPの時にはホバーについて書かなくてもいいですし、PCの時にはオープンの状態について書かなくてもいいので、もっとパターンが減るはずです。

2

軽微な変更

2020/04/03 10:22

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア35860

test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- 2. 次に、全ての状態を整理してください。そしてこれを全てCSSで反映できるようにスクリプトを書きます。
19
+ 2. 次に、全ての状態を整理してください。そしてこれを全てCSSで反映できるようにクラをトグルするスクリプトを書きます。
20
20
 
21
21
  ・PCサイズかスマホサイズか
22
22
 

1

コメントを受けて追記

2020/04/03 08:22

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア35860

test CHANGED
@@ -1 +1,33 @@
1
1
  だいぶ混乱しているコードなので、もういっそPC用のメニューとスマホ用のメニューを別に作って、メディアクエリで不要な方を表示しないようにしてはいかがですか?
2
+
3
+
4
+
5
+ ### コメントを受けて追記
6
+
7
+
8
+
9
+ 要素を二つに分ける、というご提案はお気に召さなかったようなので、別のご提案をいたします。3番目の方針をベースにします。
10
+
11
+
12
+
13
+ 1. まず、前提として「メニューの開閉はすべてCSSで表現する」ことに統一してください。
14
+
15
+ JavaScript と CSS が重複していることが混乱のもとです。jQueryのアニメーションはすべて削除しましょう。
16
+
17
+
18
+
19
+ 2. 次に、全ての状態を整理してください。そしてこれを全てCSSで反映できるようにスクリプトを書きます。
20
+
21
+ ・PCサイズかスマホサイズか
22
+
23
+ ・オープンかクローズか
24
+
25
+ ・ホバーか非ホバーか
26
+
27
+
28
+
29
+ 3. 最後に、CSSで全ての状態のスタイルを表現します。
30
+
31
+
32
+
33
+ 以上、ご不明の点がありましたら、コメント欄にてご連絡ください。