프로그래밍 공부 일기

2020년 5월 30일 Progate Lv.76

아코디언 기능

클릭하는 것으로 숨겨져 있는 상세를 전개 표시시키는 기능. 이번은 FAQ에 구현하고 질문을 클릭하면 그 대답이 슬라이드 표시/숨겨지는 것을 만든다.

1. 숨기고 싶은 부분(대답 부분)을 CSS로 숨기기
2.클릭하는 부분(질문 부분)에는 같은 클래스명으로 한다
3. 그 click 이벤트 만들기

<div class="answer">...</div>
<div class="answer open">...</div> <!--openは答えを表示するときの目印-->

hasClass 메소드

인수에 지정한 클래스를 객체를 가지고 있는지 판단할 때 사용한다. (있는 경우 true를, 그렇지 않으면 false를 반환합니다)

<div class="answer">...</div>
<div class="answer open">...</div> 

$('.answer').hasClass('open'); //結果はfalse
$('.answer open').hasClass('open'); //結果はtrue

if 사용

숨겨진 부분(응답 부분)의 표시/숨기기에 사용한다. 질문을 클릭했을 때 $('answer') 가 이미 open 클래스를 가지고 있다면(= 이미 표시되어 있다), open 클래스를 제외하고 대답을 숨긴다. (open 클래스가 없을 때는 반대의 일을한다)

if($('answer').hasClass('open')){
  //openクラスを外す処理と答えを隠す処理
}else{
  //openクラスをつける処理と答えを表示する処理
}

이 if 문이 true 일 때, 대답의 부분은 slideUp 메소드로 숨긴다. 반대로 if문이 false일 때는 slideUp 메소드로 표시한다. (아코디언 슬라이드 조작)