[j-Query] Accodian Menu UI

UI 조건

1. que를 클릭했을 때, 바로 다음 요소(anw)가 보이게 하라
2. que를 클릭했을때 on class 적용, 다른 que나 해당 que 클릭시 on class 해제
3. 하나의 anw 만 slide 애니메이트 적용

구현

See the Pen jQuery Accodian Menu UI by day.binna (@bitnaleeeee) on CodePen.

설명

1. next()함수는 바로 다음 요소를 선택하여 준다.
2. stop함수는 적용된 애니메이트를 멈춰주는 역할을 한다. 여기서 stop을 사용해야 하는 이유는, slideToggle함수가 적용된 후 해당 함수를 멈춘 후 다음 요소의 애니메이트를 적용시키기 위해서다.
3. siblings() 에 요소 이름을 넣어주면, 해당 요소 이름을 가지고 있는 형제요소를 선택하여 준다. 만약 ()안에 anw를 넣어주지 않으면, 모든 anw, que형제요소를 slideup 한다.