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