안녕하세요. 아래 codepen 링크는 제가 작성한 flex-panel (클릭하면 커졌다가 작아지는 패널) 코드입니다. https://codepen.io/w00kgod/pen/VgNaxW

구현한 기능 :

JS로 구현한 기능은 3가지 입니다.

1. 각 패널을 클릭하면 패널이 열리면서 open 과 open-active 클래스를 추가하기

this.classList.add('open');
        setInterval(function(){item.classList.add('open-active');},400)  

2 .패널이 클릭될때 이전에 클릭된게 있으면 닫고 패널이 열리게 하기

이 기능은 previousE라는 전역 변수를 이용하여 이벤트가 발생할때마다 발생이 일어난 element를 저장하여 구현하였습니다.

    const panel = document.querySelectorAll('.panel');
    var previousE = panel[0]; // 초기화 

    panel.forEach(function(item){

      item.addEventListener('click',function(){
        if(previousE.className.split(' ')[2]){
        previousE.classList.remove('open');
        }

        this.classList.add('open');
        setInterval(function(){item.classList.add('open-active');},400)  

        previousE = this // 현재 이벤트 previousE 에 저장 

        this.addEventListener('click', function(){
          this.classList.remove('open','open-active'); 
        });

      });
    })

3. 마지막으로 클릭했던 패널을 다시 클릭하여 열렸던 패널을 닫히게 하기

아래의 코드를 item.addEventListener 에 추가하였습니다.

   this.addEventListener('click', function(){
          this.classList.remove('open','open-active'); 
        });

그런데 여기서 문제점이 있습니다.

마지막 item.addEventListener 안에 this.addEventListener 를 받는 경우 패널이 열렸다 닫히는 과정이 딱 한번만 일어나게 됩니다.

질문1) 이 과정이 클릭할때마다 반복되어야 하는데 왜 한번만 발생한 뒤에는 다시 열리지 않을까요?

저의 시행착오 :

저는 AddClass.List로 open , open-active가 안들어가거나, remove로 open, open-active 클래스가 삭제가 되지 않았다고 생각하여 console.log(this)로 this.classList.add('open');나 this.classList.remove('open','open-active'); 주변을 확인해 보았습니다.

그런데 classList.add 가 작성된곳 위의 console.log(this) 에서는 넣지도 않은 open class가 들어가 있더군요.

질문2) console.log(this) 에서 open class가 들어가는 과정이 먼저 일어나는것은 호이스팅 때문인가요? 호이스팅이 어디에서 일어나는것인가요...? 질문3) console.log의 대상을 this가 아닌 다른것으로 해야할까요?

    console.log(this) // <div class="panel panel3 open open-active">
    this.classList.add('open')
    setInterval(function(){item.classList.add('open-active');},400) 

remove 근처에 this 에서는 open 클래스가 삭제되어 있습니다. 아마도 이것은 위에 초기화에서 open만 삭제해주어 발생한것같습니다.

   this.addEventListener('click', function(){
      console.log(this) //<div class="panel panel3 open-active">
      this.classList.remove('open','open-active'); 
      console.log(this) //div class="panel panel3 open-active">
    }

질문3) 질문1과 크게 다르지 않은 질문입니다만, 제가 작성한 방식( 과거 이벤트를 저장하고 , 이벤트 리스너에 이벤트 리스너를 또 달아서 해결하는 방식)으로 이 문제를 해결할 수 있을까요? 사실 , 좋은 방법은 아닌것같은데.. 이러한 방법으로 해결할 수 있을까? 라는 생각이 들어 질문을 드립니다.

질문2와 질문3은 질문1을 해결하다 보니 발생한 문제입니다.질문1을 해결할 수 있는 더 나은 방법을 알려주신다면 더 감사할것같습니다!

긴 질문글 읽어주셔서 감사합니다!