아코디언 메뉴

안까먹게 정리 해야쥬 ㅠㅠ 머리가 나쁘면 적어놓기라도 하고 자주 보자!(나한테 하는 말)

첫 번째 방법.

slideToggle(), slideUp() , next(), siblings()
필요한 .action()

<!--html-->
<div class="qua_list">
    <h3 class="question">Question title</h3>
    <div class="answer">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, aperiam deserunt officia ea cupiditate
        explicabo consequatur commodi nam dignissimos exercitationem sit et incidunt laborum mollitia? Modi, ducimus?
        Libero, voluptas saepe.
      </p>
    </div>
    <h3 class="question">Question title</h3>
    <div class="answer">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, aperiam deserunt officia ea cupiditate
        explicabo consequatur commodi nam dignissimos exercitationem sit et incidunt laborum mollitia? Modi, ducimus?
        Libero, voluptas saepe.
      </p>
    </div>
    <h3 class="question">Question title</h3>
    <div class="answer">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, aperiam deserunt officia ea cupiditate
        explicabo consequatur commodi nam dignissimos exercitationem sit et incidunt laborum mollitia? Modi, ducimus?
        Libero, voluptas saepe.
      </p>
    </div>
  </div>

//js
   $('.qua_list .question').click(function (e) {
   e.preventDefault();
    $(this).next().slideToggle().siblings('.answer').slideUp()
  })

로직

• 클릭 된 question 요소를 this로 받는다.
  -클릭 된 요소 -> $(this)
• $(this).next() question 요소에 다음 요소니까 즉 answer 요소를 slideToggle()한다.
• siblings()만 할 경우 qusetion도 형제고 answer도 형제이기 때문에 정확한 요소를 지정해 줘야한다.
• 다른 question이 클릭 되면 형제의 answer요소는 slideUp() 접는다.

두 번째 방법

not() , removeClass(), toggleClass()

//js
    $('.question').click(function (e) {
    // 클릭 된  question 클래스의 다음 요소를 변수 anw에 저장
    var anw = $(this).next();
    //클릭된 question 다음 요소에 class on이 아닌 것 빼고는 전부 on을 제거해라
    $('.on').not(anw).removeClass('on');
    // 클릭 된 question 다음 요소에는 on을 추가해라
    $(anw).toggleClass('on');
  });

로직

• 클릭 된 question 요소를 변수 anw에 할당
• 클릭 된 요소에 클래스 on이 아닌 것 요소들은!! on을 제거 (클릭 된 거 빼고 나머지 on제거)
• 클릭 된 요소에는 toggleClass('on')

정리마치며..

항상 생각하는 거지만 addClass 나 toggleClass를 선언하기 전에
먼저 removeClass 하는 로직은 정말 이해가 안간다...