回答編集履歴
3
コメントを受けて追記2
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
軽微な変更
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
コメントを受けて追記
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
|
+
以上、ご不明の点がありましたら、コメント欄にてご連絡ください。
|