回答編集履歴
5
説明修正
test
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
直接的な問題解決ではないですが、トリガーを1つ (以下の例だと.activeというクラス) に集約させます。
|
|
1
|
+
直接的な問題解決ではないですが、トリガーを1つ (以下の例だと.activeというクラス) に集約させると楽だと思います。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
まずCSS側で「アクティブ時の見た目」と「非アクティブ時の見た目」を作り、
|
|
5
|
+
↓まずCSS側で「アクティブ時の見た目」と「非アクティブ時の見た目」を作り、
|
|
6
|
-
|
|
7
|
-
そのあとJavaScript側で、クリックした`.accordion-wrap`にだけ.activeクラスを付与するという処理を加えます。
|
|
8
|
-
|
|
9
|
-
|
|
10
6
|
|
|
11
7
|
```CSS
|
|
12
8
|
|
|
@@ -24,7 +20,7 @@
|
|
|
24
20
|
|
|
25
21
|
```
|
|
26
22
|
|
|
27
|
-
|
|
23
|
+
↓そのあとJavaScript側で、クリックした`.accordion-wrap`にだけ.activeクラスを付与するという処理を加えます。
|
|
28
24
|
|
|
29
25
|
```jQuery
|
|
30
26
|
|
|
@@ -56,6 +52,8 @@
|
|
|
56
52
|
|
|
57
53
|
|
|
58
54
|
|
|
59
|
-
こうすることで、JavaScript側
|
|
55
|
+
こうすることで、JavaScript側、CSS側それぞれで考えることが少なくなり、表示がうまくいかないときの原因特定が楽になると思います。
|
|
60
56
|
|
|
57
|
+
|
|
58
|
+
|
|
61
|
-
またデザイン変更時に
|
|
59
|
+
また、現状デザイン変更時にJavaScriptにも手を加える必要がありますが、トリガーを1つに集約させることでCSSだけを修正すればよくなるので、その際も楽です。
|
4
説明文追加
test
CHANGED
|
@@ -56,4 +56,6 @@
|
|
|
56
56
|
|
|
57
57
|
|
|
58
58
|
|
|
59
|
-
こうすることで、JavaScript側の記述をシンプルにすることができる (=あれこれ考えなくて済む) ようにな
|
|
59
|
+
こうすることで、JavaScript側の記述をシンプルにすることができる (=あれこれ考えなくて済む) ようになるので楽だと思います。
|
|
60
|
+
|
|
61
|
+
またデザイン変更時に、CSS側とJavaScript側両方手を加える必要もなくなります。
|
3
ソースコード修正
test
CHANGED
|
@@ -30,11 +30,9 @@
|
|
|
30
30
|
|
|
31
31
|
$('.accordion-wrap').click(function() {
|
|
32
32
|
|
|
33
|
-
if ($(
|
|
33
|
+
if ($(this).hasClass('active')) {
|
|
34
34
|
|
|
35
|
-
// アクティブ状態の.accordion-wrapをクリックしたとき、非アクティブ状態に
|
|
36
|
-
|
|
37
|
-
$(
|
|
35
|
+
$(this).removeClass('active');
|
|
38
36
|
|
|
39
37
|
}
|
|
40
38
|
|
|
@@ -48,7 +46,7 @@
|
|
|
48
46
|
|
|
49
47
|
// クリックした.accordion-wrapにのみアクティブ時のクラスを追加
|
|
50
48
|
|
|
51
|
-
$(
|
|
49
|
+
$(this).addClass('active');
|
|
52
50
|
|
|
53
51
|
}
|
|
54
52
|
|
2
アクティブ状態の.accordion-wrapをクリックしたとき、非アクティブ状態に、の記述追加
test
CHANGED
|
@@ -30,15 +30,27 @@
|
|
|
30
30
|
|
|
31
31
|
$('.accordion-wrap').click(function() {
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
if ($('.accordion-wrap').hasClass('active')) {
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
// アクティブ状態の.accordion-wrapをクリックしたとき、非アクティブ状態に
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
$('.this').removeClass('active');
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
}
|
|
40
40
|
|
|
41
|
+
else {
|
|
42
|
+
|
|
43
|
+
// いったんすべての.accordion-wrapからアクティブ時のクラスを削除
|
|
44
|
+
|
|
45
|
+
$('.accordion-wrap').removeClass('active');
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
// クリックした.accordion-wrapにのみアクティブ時のクラスを追加
|
|
50
|
+
|
|
41
|
-
$('.this').addClass('active');
|
|
51
|
+
$('.this').addClass('active');
|
|
52
|
+
|
|
53
|
+
}
|
|
42
54
|
|
|
43
55
|
});
|
|
44
56
|
|
1
jQueryソースコード修正
test
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
|
|
39
39
|
// クリックした.accordion-wrapにのみアクティブ時のクラスを追加
|
|
40
40
|
|
|
41
|
-
$('.this').add('active');
|
|
41
|
+
$('.this').addClass('active');
|
|
42
42
|
|
|
43
43
|
});
|
|
44
44
|
|