uiux 18일차

<아코디언>

각자의 상자 배경색 바꾸기

$('.box-1>*').click(function(){
  let $this = $(this);
  $this.addClass('active');
})

코드를 길게 쓰지 않고 간략하게 보기
.box-1>*

---

toggle:계속 반복해서 변하는 것

if ( $this.hasClass('active') ) {
    $this.removeClass('active');
  }
  else {
    $this.addClass('active');
  }

if문
hasclass
removeclass
addclass

---

next prev

$('.box-1 > *').click(function() {
  let $this = $(this);
  
  $this.removeClass('active');
  $this.prev().addClass('active');
  $this.next().addClass('active');
});

next 함수는 그 다음을 선택
prev 함수는 그 전을 선택

---

마우스를 올렸을 때 바꾸게 하는 것

.mouseenter:커서가 해당요소 위로 올라간다면 상위 요소로 이벤트가 전파됨
.mouseleave:커서가 해당요소 바깥으로 간다면
.dbl:더블클릭 됐을 때 작용

---

클릭했을 때 자신 빼고 배경색을 바꾸게 하는 것

$('.box-1>*').click(function(){
  $('.box-1>*').addClass('active');
  $(this).removeClass('active');
});

---

찾기

 $this.parent().children().addClass('active');
 $this.parent().find('>*').addClass('active');
 $this.siblings().addClass('active')

pasrent = box-1
siblings() 자신을 제외한 형제 요소를 찾음

---

float
특정방향으로 보낼 수 있음

float:right;

---

아코디언
hover가 아니라 클릭했을 때 li가 나오게 하기

function FaqBox__init() {
  $('.faq-box > ul > li').click(function() {
    let $this = $(this);
    
    $this.siblings('.hover').removeClass('hover');
    
    if ( $this.hasClass('hover') ) {
      $this.removeClass('hover');
    }
    else {
      $this.addClass('hover');
    }
  });
  
  $('.faq-box__answer').click(function() {
    return false;
  });
}

FaqBox__init();

-box를 눌렀을 때 모든 li가 나오게 되는 것을 막음
-content를 눌렀을 때 닫히기 않게 함