teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問JS アコーディオンUI　一つの項目を開くと、他は閉じるように実装したい

編集履歴

質問編集履歴

1

変更済み

2022/09/16 12:22

投稿

yukarin
yukarin

スコア21

test CHANGED
File without changes
test CHANGED
@@ -9,7 +9,7 @@
9
9
 
10
10
  ### 該当のソースコード
11
11
 
12
- ```html,css,js
12
+ ```html
13
13
  <!DOCTYPE html>
14
14
  <html lang="ja">
15
15
  <head>
@@ -21,107 +21,109 @@
21
21
  <h1>FAQ</h1>
22
22
  <dl>
23
23
  <div>
24
- <dt>質問です</dt>
24
+ <dt class="dt">質問です</dt>
25
- <dd>回答です。。</dd>
25
+ <dd class="dd">回答です。</dd>
26
26
  </div>
27
27
  <div>
28
- <dt>質問です</dt>
28
+ <dt class="dt">質問です</dt>
29
- <dd>回答です。。</dd>
29
+ <dd class="dd">回答です。</dd>
30
30
  </div>
31
31
  <div>
32
- <dt>質問です</dt>
32
+ <dt class="dt">質問です</dt>
33
- <dd>回答です。</dd>
33
+ <dd class="dd">回答です。</dd>
34
34
  </div>
35
35
  </dl>
36
36
  <script src="js/main.js"></script>
37
37
  </body>
38
38
  </html>
39
+
40
+ ```
41
+
39
- ////////////////////////////////////////////////////////////////////
42
+ ```css
40
43
  h1 {
44
+ margin-bottom: 16px;
45
+ padding: 8px 16px;
46
+ border-bottom: 1px solid;
41
- font-size: 18px;
47
+ font-size: 18px;
42
- border-bottom: 1px solid;
43
- padding: 8px 16px;
44
- margin-bottom: 16px;
45
48
  }
46
49
 
47
50
  dl {
48
- margin: 0;
51
+ margin: 0;
49
52
  }
50
53
 
51
- dl > div {
54
+ dl>div {
52
- margin-bottom: 8px;
55
+ margin-bottom: 8px;
53
56
  }
54
57
 
55
58
  dt {
59
+ /* ↑クリック連打してもテキストが選択されない */
60
+ position: relative;
56
- padding: 8px;
61
+ padding: 8px;
57
- cursor: pointer;
62
+ cursor: pointer;
58
- user-select: none;
63
+ user-select: none;
59
- /* ↑クリック連打してもテキストが選択されない */
60
- position: relative;
61
64
  }
62
65
 
63
66
  dt::before {
64
- content: "Q. ";
67
+ content: "Q. ";
65
68
  }
66
69
 
67
70
  dt::after {
71
+ position: absolute;
72
+ top: 8px;
73
+ right: 16px;
68
- content: "+";
74
+ content: "+";
69
- position: absolute;
70
- top: 8px;
71
- right: 16px;
72
- transition: transform 0.8s;
75
+ transition: transform 0.8s;
73
76
  }
74
77
 
75
78
  dd {
79
+ display: none;
80
+ margin: 0;
76
- padding: 8px;
81
+ padding: 8px;
77
- margin: 0;
78
- display: none;
79
82
  }
80
83
 
81
84
  dd::before {
82
- content: "A. ";
85
+ content: "A. ";
83
86
  }
84
87
 
85
- /* dl > div.appear dd {
88
+ dd.show {
86
- display: block;
89
+ display: block;
87
- animation: 0.3s fadeIn;
88
- } */
89
-
90
- dd.show{
91
- display: block;
92
90
  }
93
91
 
94
- dl > div.appear dt::after {
92
+ dl>div.appear dt::after {
95
- /* プラスマークから×マークに（回転している） */
93
+ /* プラスマークから×マークに（回転している） */
96
- transform: rotate(45deg);
94
+ transform: rotate(45deg);
97
95
  }
98
96
 
99
97
  @keyframes fadeIn {
100
- 0% {
98
+ 0% {
101
- opacity: 0;
99
+ opacity: 0;
102
- transform: translateY(-10px);
100
+ transform: translateY(-10px);
103
- }
101
+ }
104
- 100% {
102
+ 100% {
105
- opacity: 1;
103
+ opacity: 1;
106
- transform: none;
104
+ transform: none;
107
- }
105
+ }
108
106
  }
107
+
108
+ ```
109
+
109
- ////////////////////////////////////////////////////////////////////
110
+ ```js
110
111
  "use strict";
111
112
 
112
113
  {
113
- const dt = document.querySelectorAll("dt");
114
+ const dt = document.getElementsByClassName("dt");
115
+ const dd = document.getElementsByClassName("dd");
116
+ console.log(dt);
114
- dt.forEach((dt) => {
117
+ dt.forEach((test) => {
115
- dt.addEventListener("click", () => {
118
+ test.addEventListener("click", () => {
116
- const dd = dt.nextElementSibling;
117
- dd.classList.toggle("show");
119
+ dt.classList.toggle("show");
118
120
 
119
121
  dt.forEach((dd) => {
120
- if (dd.classList !== "show") {
122
+ if (dd.classList !== dd) {
121
123
  dd.classList.remove("show");
122
124
  }
123
125
  });
124
126
  });
125
127
  });
126
128
  }
127
-
129
+ ```
JavaScript