teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

5

説明修正

2020/03/14 01:02

投稿

new1ro
new1ro

スコア4528

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
- またデザイン変更時に、CSS側とJavaScript側両方手を加える必要もなくなります。
30
+ また、現状デザイン変更時にJavaScriptにも手を加える必要がありますが、トリガーを1つに集約させることでCSSだけを修正すればよくなるので、その際も楽です

4

説明文追加

2020/03/14 01:01

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -27,4 +27,5 @@
27
27
  });
28
28
  ```
29
29
 
30
- こうすることで、JavaScript側の記述をシンプルにすることができる (=あれこれ考えなくて済む) ようになます。
30
+ こうすることで、JavaScript側の記述をシンプルにすることができる (=あれこれ考えなくて済む) ようになるので楽だと思います。
31
+ またデザイン変更時に、CSS側とJavaScript側両方手を加える必要もなくなります。

3

ソースコード修正

2020/03/14 00:54

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -14,16 +14,15 @@
14
14
 
15
15
  ```jQuery
16
16
  $('.accordion-wrap').click(function() {
17
- if ($('.accordion-wrap').hasClass('active')) {
17
+ if ($(this).hasClass('active')) {
18
- // アクティブ状態の.accordion-wrapをクリックしたとき、非アクティブ状態に
19
- $('.this').removeClass('active');
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
- $('.this').addClass('active');
25
+ $(this).addClass('active');
27
26
  }
28
27
  });
29
28
  ```

2

アクティブ状態の.accordion-wrapをクリックしたとき、非アクティブ状態に、の記述追加

2020/03/14 00:50

投稿

new1ro
new1ro

スコア4528

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
- // いったんすべての.accordion-wrapからアクティブ時のクラスを削除
22
+ // いったんすべての.accordion-wrapからアクティブ時のクラスを削除
18
- $('.accordion-wrap').removeClass('active');
23
+ $('.accordion-wrap').removeClass('active');
19
-   
24
+   
20
- // クリックした.accordion-wrapにのみアクティブ時のクラスを追加
25
+ // クリックした.accordion-wrapにのみアクティブ時のクラスを追加
21
- $('.this').addClass('active');
26
+ $('.this').addClass('active');
27
+ }
22
28
  });
23
29
  ```
24
30
 

1

jQueryソースコード修正

2020/03/14 00:44

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -18,7 +18,7 @@
18
18
  $('.accordion-wrap').removeClass('active');
19
19
    
20
20
  // クリックした.accordion-wrapにのみアクティブ時のクラスを追加
21
- $('.this').add('active');
21
+ $('.this').addClass('active');
22
22
  });
23
23
  ```
24
24