웹03_아코디언식 faq에 js 적용시키기

https://codepen.io/leenyooo/pen/NWmgLGV

0326js

아코디언 접기 수업코드

오늘 js 작업 전 생각해야할것들.

 

/* $("body").css("background-color", "gray") 처음 시작할때 연결이 되었는지 배경색으로 확인

1. css에서 실행 되어야 하는 식을 먼저 입력한다.

2. css에서 실행되어야하는 식이 바로 실행되지 않도록 조건을 걸어준다.

3. js에서 조건이 실행될 수 있는 코드를 작성한다.

ㄴ 목적을 먼저 주석으로 작성하면 좋다.

ㄴ 버튼이 두개인지 한개인지 체크하고 시작하면 좋다.

- 버튼이 두개면 click이벤트가 두개

-버튼이 한개면 if(){} else{}

ㄴ 식을 한번에 작성하지 말고 덩어리로 잘라서 퍼즐 맞추듯이 코드를 끼워 넣으면 좋다.

(클릭이벤트)(조건문)(추가되는 실행문)(제거되는 실행문)(함수)(반복될 수 있는 조건문)

 

[주의사항]

- Class -> C는 대문자로 작성해야한다.

- this를 활용하면 간단하게 해결할 수 있다.

ㄴ this는 어떤 조건이 필요했는지 체크하면 좋다.

- hasClass를 사용할때 ;를 사용하면 안된다.

- 자바스크립트에 코드구조가 잘못되었으면 console창에 나오고

선택자가 잘못되었으면 console창에 오류가 나오지 않는다.

- console.log("실행")을 입력해서 코드가 제대로 실행되는지 확인

*/

li형제들끼리 이벤트가 일어난다.

 

/* li클릭했을때 자식인 .a-box가 block이 되면서 구조가 나와야한다. */

 

// 클릭

$("").click();

 

// 함수

function (){

 

}

 

// 반복문

if(){

 

}

else {

 

}

 

//추가

$("").addClass();

//판단

$("").hasClass();

//제거

$("").removeClass();

//선택자

this.faq-box>ul>li

 

조각으로 작성해놓고 퍼즐 끼워맞추듯이 복붙하기

기존에 li:honer 를 li.hover로 바꿔주면 됨

 

 

/* (두번째li)(클릭)(형제선택이벤트) (첫번째 li제거)(첫번째 답변 제거) */

https://www.devkuma.com/docs/jquery/%ED%98%95%EC%A0%9C-%EC%9A%94%EC%86%8C%EC%9D%98-%ED%83%90%EC%83%89-siblings--next--prev-/

jQuery 입문 | 요소의 탐색 | 형제 요소의 탐색 .siblings() .next() .prev()

$(".faq-box>ul>li").click(function (){

$(this).siblings(".hover").removeClass("hover");

});