teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問HTML文書をJavaScriptで開閉させたい

編集履歴

回答編集履歴

8

テキスト修正

2019/02/04 01:19

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -122,7 +122,7 @@
122
122
 
123
123
  }
124
124
 
125
- )
125
+ );
126
126
 
127
127
  }
128
128
 
@@ -130,4 +130,4 @@
130
130
 
131
131
  ```
132
132
 
133
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/x1mjzhe3/2/](https://jsfiddle.net/jun68ykt/x1mjzhe3/2/)
133
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/x1mjzhe3/4/](https://jsfiddle.net/jun68ykt/x1mjzhe3/4/)

7

テキスト修正

2019/02/04 01:19

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -95,3 +95,39 @@
95
95
 
96
96
 
97
97
  以上参考になれば幸いです。
98
+
99
+
100
+
101
+ ### 追記
102
+
103
+
104
+
105
+ HTMLのほうは修正せずに、JSのみ修正する案です。
106
+
107
+
108
+
109
+ ```javascript
110
+
111
+ document.querySelectorAll('.s_head').forEach(
112
+
113
+ h => {
114
+
115
+ h.addEventListener('click',
116
+
117
+ () => {
118
+
119
+ const b = h.nextElementSibling;
120
+
121
+ b.style.display = b.style.display === 'flex' ? 'none' : 'flex';
122
+
123
+ }
124
+
125
+ )
126
+
127
+ }
128
+
129
+ );
130
+
131
+ ```
132
+
133
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/x1mjzhe3/2/](https://jsfiddle.net/jun68ykt/x1mjzhe3/2/)

6

テキスト修正

2019/02/04 00:58

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -38,15 +38,15 @@
38
38
 
39
39
  diary => {
40
40
 
41
- const p = diary.querySelector('.s_body'),
41
+ const h = diary.querySelector('.s_head'),
42
42
 
43
- h = diary.querySelector('.s_head');
43
+ b = diary.querySelector('.s_body');
44
44
 
45
45
 
46
46
 
47
47
  h.addEventListener('click', () => {
48
48
 
49
- p.style.display = p.style.display === 'flex' ? 'none' : 'flex';
49
+ b.style.display = b.style.display === 'flex' ? 'none' : 'flex';
50
50
 
51
51
  });
52
52
 
@@ -58,7 +58,7 @@
58
58
 
59
59
 
60
60
 
61
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/u2kmyhat/11/](https://jsfiddle.net/jun68ykt/u2kmyhat/11/)
61
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/u2kmyhat/13/](https://jsfiddle.net/jun68ykt/u2kmyhat/13/)
62
62
 
63
63
 
64
64
 

5

テキスト修正

2019/02/03 21:12

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
File without changes

4

テキスト修正

2019/02/03 21:12

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
  h.addEventListener('click', () => {
48
48
 
49
- p.style.display = p.style.display === 'none' ? 'flex' : 'none';
49
+ p.style.display = p.style.display === 'flex' ? 'none' : 'flex';
50
50
 
51
51
  });
52
52
 
@@ -58,7 +58,7 @@
58
58
 
59
59
 
60
60
 
61
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/u2kmyhat/6/](https://jsfiddle.net/jun68ykt/u2kmyhat/6/)
61
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/u2kmyhat/11/](https://jsfiddle.net/jun68ykt/u2kmyhat/11/)
62
62
 
63
63
 
64
64
 

3

テキスト修正

2019/02/03 21:06

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -40,19 +40,11 @@
40
40
 
41
41
  const p = diary.querySelector('.s_body'),
42
42
 
43
- h2 = diary.querySelector('.s_head');
43
+ h = diary.querySelector('.s_head');
44
44
 
45
45
 
46
46
 
47
- // 初期表示ではすべての本文を閉じておく
48
-
49
- p.style.display = 'none';
50
-
51
-
52
-
53
- // ヘッダをクリックしたときの設定
54
-
55
- h2.addEventListener('click', () => {
47
+ h.addEventListener('click', () => {
56
48
 
57
49
  p.style.display = p.style.display === 'none' ? 'flex' : 'none';
58
50
 
@@ -66,7 +58,7 @@
66
58
 
67
59
 
68
60
 
69
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/u2kmyhat/4/](https://jsfiddle.net/jun68ykt/u2kmyhat/4/)
61
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/u2kmyhat/6/](https://jsfiddle.net/jun68ykt/u2kmyhat/6/)
70
62
 
71
63
 
72
64
 

2

テキスト修正

2019/02/03 20:38

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -80,6 +80,26 @@
80
80
 
81
81
  - JS では、`diary`クラスのすべての `<div>`を取得して、その中にある `<h2>`と `<p>`について期待する動作を設定します。
82
82
 
83
+
84
+
83
85
  　
84
86
 
87
+
88
+
89
+ ご質問にあった、
90
+
91
+
92
+
93
+ > 1) 配列を使ってメニューをまとめたいのですが、どのようにすればよいでしょうか?
94
+
95
+ 2) そもそも配列を使ってメニューを作るのは不適切なのでしょうか?
96
+
97
+
98
+
99
+ についてですが、上記のコードのように、配列を別途追加しなくても要件を満たすコードは書けます。ご質問のコードにある配列`s`は、各本文が開いているか、閉じているかを示すフラグの配列ですが、フラグを追加するたびに、ロジックを追いにくくなりバグを生みやすくなると思ったほうがよいかと思います。
100
+
101
+
102
+
103
+
104
+
85
105
  以上参考になれば幸いです。

1

テキスト修正

2019/02/03 19:20

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -10,25 +10,23 @@
10
10
 
11
11
  ```html
12
12
 
13
- <body>
13
+ <div class="diary">
14
14
 
15
- <div class="diary">
15
+ <h2 class="s_head">2019/01/01</h2>
16
16
 
17
- <h2>2019/01/01</h2>
17
+ <p class="s_body">いろはにほへと</p>
18
18
 
19
- <p>いろはにほへと</p>
19
+ </div>
20
20
 
21
- </div>
22
21
 
23
- <div class="diary">
24
22
 
25
- <h2>2019/01/02</h2>
23
+ <div class="diary">
26
24
 
27
- <p>ちりぬるを</p>
25
+ <h2 class="s_head">2019/01/02</h2>
28
26
 
29
- </div>
27
+ <p class="s_body">ちりぬるを</p>
30
28
 
31
- </body>
29
+ </div>
32
30
 
33
31
  ```
34
32
 
@@ -40,9 +38,9 @@
40
38
 
41
39
  diary => {
42
40
 
43
- const p = diary.querySelector('p'),
41
+ const p = diary.querySelector('.s_body'),
44
42
 
45
- h2 = diary.querySelector('h2');
43
+ h2 = diary.querySelector('.s_head');
46
44
 
47
45
 
48
46
 
@@ -68,7 +66,7 @@
68
66
 
69
67
 
70
68
 
71
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/u2kmyhat/3/](https://jsfiddle.net/jun68ykt/u2kmyhat/3/)
69
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/u2kmyhat/4/](https://jsfiddle.net/jun68ykt/u2kmyhat/4/)
72
70
 
73
71
 
74
72
 
@@ -82,12 +80,6 @@
82
80
 
83
81
  - JS では、`diary`クラスのすべての `<div>`を取得して、その中にある `<h2>`と `<p>`について期待する動作を設定します。
84
82
 
85
- 　　
86
-
87
-
88
-
89
- ご質問のような状況の場合、HTMLをどう書くのかによって、JavaScript のコードが簡単になったり、複雑になったりしますが、まずはHTMLのほうで `id`をなるべく使わないということを意識するとよいかもしれません。
83
+ 　
90
-
91
-
92
84
 
93
85
  以上参考になれば幸いです。