回答編集履歴
5
テキスト追加
answer
CHANGED
|
@@ -143,4 +143,34 @@
|
|
|
143
143
|
+ }
|
|
144
144
|
+ });
|
|
145
145
|
```
|
|
146
|
-
を追加したらええと思うで。
|
|
146
|
+
を追加したらええと思うで。
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
#### 追記4
|
|
150
|
+
|
|
151
|
+
Accordionクラスのstaticなメソッドとして、すべてのアコーディオンを閉じる `closeAll()`を追加する。
|
|
152
|
+
|
|
153
|
+
```diff
|
|
154
|
+
class Accordion {
|
|
155
|
+
static instancesMap = new Map;
|
|
156
|
+
|
|
157
|
+
+ static closeAll() {
|
|
158
|
+
+ Array.from(Accordion.instancesMap.values()).forEach(acc => acc.close());
|
|
159
|
+
+ }
|
|
160
|
+
+
|
|
161
|
+
constructor(element) {
|
|
162
|
+
Accordion.instancesMap.set(element, this);
|
|
163
|
+
this.element = element;
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
それで、メニューを閉じる処理の中で
|
|
167
|
+
|
|
168
|
+
> メニューを閉じた際にアコーディオンも閉じる処理を無理矢理書いた
|
|
169
|
+
|
|
170
|
+
コードの替わりに、アコーディオンを閉じる処理は、下記の一行
|
|
171
|
+
|
|
172
|
+
```javascript
|
|
173
|
+
Accordion.closeAll();
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
に任せればええんちゃうかな〜
|
4
テキスト追加
answer
CHANGED
|
@@ -116,4 +116,31 @@
|
|
|
116
116
|
+ }
|
|
117
117
|
```
|
|
118
118
|
|
|
119
|
-
の6行を`open()` に追加やね。
|
|
119
|
+
の6行を`open()` に追加やね。
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
#### 追記3
|
|
123
|
+
|
|
124
|
+
もうひとつ。 上に書いた**追記2** では、
|
|
125
|
+
|
|
126
|
+
- 自身(`this`)が`--one`を持っているときのみ、兄弟アコーディオンの中で開いているものを閉じる
|
|
127
|
+
|
|
128
|
+
ようにしているわけですが、これよりも自身を排他的に開く場合が増える条件として、
|
|
129
|
+
|
|
130
|
+
- 自身(`this`)が`--one`を持っているか、もしくは兄弟アコーディオンの中で開いているものが`--one`を持っていれば、兄弟アコーディオンの中で開いているものを閉じる。
|
|
131
|
+
|
|
132
|
+
ようにしたいのであれば、まずコンストラクターに以下の一行
|
|
133
|
+
|
|
134
|
+
```diff
|
|
135
|
+
+ this.isExclusive = this.element.classList.contains("--one");
|
|
136
|
+
```
|
|
137
|
+
を追加する。これは排他的(exclusive)に開くアコーディオンであることを表すフラグや。これを使うて、`open()` には以下の6行
|
|
138
|
+
```diff
|
|
139
|
+
+ this.siblings.forEach(elm => {
|
|
140
|
+
+ const sibling = Accordion.instancesMap.get(elm);
|
|
141
|
+
+ if (sibling && sibling.isOpen && (this.isExclusive || sibling.isExclusive)) {
|
|
142
|
+
+ sibling.close();
|
|
143
|
+
+ }
|
|
144
|
+
+ });
|
|
145
|
+
```
|
|
146
|
+
を追加したらええと思うで。
|
3
テキスト追加
answer
CHANGED
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
|
|
78
78
|
----
|
|
79
79
|
|
|
80
|
-
#### 追記
|
|
80
|
+
#### 追記1
|
|
81
81
|
|
|
82
82
|
上に書いた追加するコードの中で、`open()` メソッドには１行、
|
|
83
83
|
```diff
|
|
@@ -90,4 +90,30 @@
|
|
|
90
90
|
+ if (sibling && sibling.isOpen) sibling.close();
|
|
91
91
|
+ });
|
|
92
92
|
```
|
|
93
|
-
なのを追加や。
|
|
93
|
+
なのを追加や。
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
#### 追記2
|
|
97
|
+
|
|
98
|
+
`open()`メソッドに追加する、**追記1**の4行
|
|
99
|
+
|
|
100
|
+
```diff
|
|
101
|
+
+ this.siblings.forEach(elm => {
|
|
102
|
+
+ const sibling = Accordion.instancesMap.get(elm);
|
|
103
|
+
+ if (sibling && sibling.isOpen) sibling.close();
|
|
104
|
+
+ });
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
による兄弟アコーディオンを閉じる処理を、CSSクラス`--one`を持っているときのみ行うようにするには、この4行を
|
|
108
|
+
`if (this.element.classList.contains("--one")) {…}`で囲んだ以下
|
|
109
|
+
|
|
110
|
+
```diff
|
|
111
|
+
+ if (this.element.classList.contains("--one")){
|
|
112
|
+
+ this.siblings.forEach(elm => {
|
|
113
|
+
+ const sibling = Accordion.instancesMap.get(elm);
|
|
114
|
+
+ if (sibling && sibling.isOpen) sibling.close();
|
|
115
|
+
+ });
|
|
116
|
+
+ }
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
の6行を`open()` に追加やね。
|
2
テキスト追加
answer
CHANGED
|
@@ -5,7 +5,12 @@
|
|
|
5
5
|
> <!--アコーディオンの中にアコーディオンがある場合-->
|
|
6
6
|
|
|
7
7
|
とあるように入れ子がある、ゆうたらツリーやんな。そやからちょっと工夫いるやろな。
|
|
8
|
+
なんや、自己解決っぽい回答に
|
|
8
9
|
|
|
10
|
+
> アコーディオンを最初から開いた状態は以下のようにしたら、できました。
|
|
11
|
+
|
|
12
|
+
とあったので、この回答では、開いているのをひとつだけにする方のみについて回答するわな。
|
|
13
|
+
|
|
9
14
|
ほんで、要件の確認なんやけど、
|
|
10
15
|
|
|
11
16
|
|
|
@@ -61,9 +66,28 @@
|
|
|
61
66
|
|
|
62
67
|
|
|
63
68
|
|
|
69
|
+
|
|
64
70
|
|
|
65
71
|
|
|
66
72
|
|
|
67
73
|
|
|
68
74
|
|
|
69
|
-
以上ですぅ。これでうまくいかへんやろか〜？
|
|
75
|
+
以上ですぅ。これでうまくいかへんやろか〜？
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
----
|
|
79
|
+
|
|
80
|
+
#### 追記
|
|
81
|
+
|
|
82
|
+
上に書いた追加するコードの中で、`open()` メソッドには１行、
|
|
83
|
+
```diff
|
|
84
|
+
+ this.siblings.forEach(elm => Accordion.instancesMap.get(elm).close());
|
|
85
|
+
```
|
|
86
|
+
を追加すると書いたけど、ちょっと大雑把ゆうかせっかちやったな。もう少し丁寧に書けば、こない
|
|
87
|
+
```diff
|
|
88
|
+
+ this.siblings.forEach(elm => {
|
|
89
|
+
+ const sibling = Accordion.instancesMap.get(elm);
|
|
90
|
+
+ if (sibling && sibling.isOpen) sibling.close();
|
|
91
|
+
+ });
|
|
92
|
+
```
|
|
93
|
+
なのを追加や。
|
1
テキスト追加
answer
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
> <!--アコーディオンの中にアコーディオンがある場合-->
|
|
6
6
|
|
|
7
|
-
と
|
|
7
|
+
とあるように入れ子がある、ゆうたらツリーやんな。そやからちょっと工夫いるやろな。
|
|
8
8
|
|
|
9
9
|
ほんで、要件の確認なんやけど、
|
|
10
10
|
|