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

回答編集履歴

1

同じ要素をクリックしたときに閉じるという動作を加えました。

2020/11/04 12:44

投稿

rei02
rei02

スコア1

answer CHANGED
@@ -1,19 +1,19 @@
1
1
  const panels = document.querySelectorAll('.panel');
2
2
 
3
- function toggleOpen(){
3
+ function toggleOpen() {
4
- panels.forEach(function(panel){
4
+ panels.forEach(panel => panel.classList.remove("open"));
5
- panel.addEventListener("click", function(){
5
+ this.classList.add("open");
6
-
6
+ if(this.classList.contains("open-active")){
7
- panel.classList.toggle("open");
7
+ this.classList.remove("open");
8
- });
8
+ }
9
-
10
- });
11
- };
9
+ };
12
10
 
11
+
13
- function toggleActive(e){
12
+ function toggleActive(e){
14
- if(e.propertyName.includes('flex-grow')){
13
+ if(e.propertyName.includes('flex-grow')){
15
- this.classList.toggle('open-active');
14
+ this.classList.toggle("open-active");
16
- }
15
+ }
17
- }
16
+ }
17
+
18
+ panels.forEach(panel => panel.addEventListener('click', toggleOpen));
18
- panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
19
+ panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
19
- toggleOpen();