https://codepen.io/limyena/pen/jORwvWN
아코디언 js
...
codepen.io
[폴더 나눠서 저장]
- 스크립트 제이쿼리 연결
- 잘 연결됐는지 배경색 칠해서 확인
1. ccs에서 실행되어야하는 식을 먼저 입력한다.
2. ccs에서 실행되어야하는 식이 바로 실행되지 않도록 조건을 걸어준다.
3. js에서 조건이 실행될 수 있는 코드를 작성한다.
ㄴ목적을 먼저 주석으로 작성하면 좋다.
ㄴ버튼이 두개인지 한개인지 체크하고 시작하면 좋다.
- 버튼이 두개: click이벤트가 두개
- 버튼이 한ㄴ개: if(){}else
ㄴ식을 한번에 작성하지말고 덩어리로 잘라서 퍼즐맞추듯이 코드를 끼워넣으면 좋다.
(클릭이벤트) (조건문) (추가되는 실행문) (제거되는 실행문) (함수) (반복될 수 있는 조건문)
[주의사항]
- Class 에서 C는 무조건 대문자로 작성해야함.
- this 를 활용하면 간단하게 해결할 수 있음.
ㄴthis는 어떤 조건이 필요했는지 체크하면 좋다.
- hasClass를 사용할때 ;(세미콜론)을 사용하면 안된다.
- 자바스크립트에 코드구조가 잘못되었으면 console창에 나오고 선택자가 잘못되었으면 console창에 오류가 나오지 않는다.
- console.log("실행");을 입력해서 코드가 제대로 실행되는지 확인
[ li를 클릭했을 때 자식인 .a-box가 block이 되면서 구조가 나와야한다. ]
- 세미콜론을 점으로 바꿔주기
- Class로 변형됨
- 한번에 입력하지말고 조각 조각 입력해서 퍼즐맞추기
[두번째 답변이 ㄴㅏ올 때 첫번쨰 답변 사라지게 하기]
