uiux 19일차

아코디언 구현

$('.btn-1').click(function() {
  $('section').show();
  // $('section').hide();
});

$('.btn-2').click(function() {
  $('section').fadeIn(2000);
  //$('section').fadeOut(2000);
});

$('.btn-3').click(function() {
  $('section').slideDown(5000);
  // $('section').slideUp(5000);
});

show hide
:보여줌, 사라짐

fade in, fade out
:점점 서서히 보여주는 것, 서서히 사라지는 것

slide down, slide up
:천천히 내려오는 것, 천천히 올라가는 것

---

조상찾는 방법

    <div class="box-1">
      <div class="box-1__head border-b border-black">
        <ul class="flex">
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="box-1__main">

  1번째 let $box1 = $this.parent().parent().parent();
        let $boxMain = $box1.find(' > .box-1__main');
    
  2번째 let $box1MAin = $this.parent().parent().next();
    
  3번째 let $box1 = $this.closest('.box-1');
         let $box1Main = $box1.find('box-1__main')
    
  4번째  let thisIndex = $this.index();
         $boxMain.find(' > ul > li.active').removeClass('active');
         $boxMain.find(' > ul > li').eq(thisIndex);

1번째
$this 의 parent() 3번 입력 후 box-1을 찾음
그 다음 그 안에 있는 box-1__main을 찾음

2번째
box-1을 찾은 다음 그 다음(next) div인 box-1__main을 찾음

3번째
가까운 box-1을 찾아서 main을 찾는다

4번째
배열에서 배운 것 활용. index를 부여해서 eq로 main이 몇 번째인지 찾기

---

반응형 만들기

@media ( max-width:767px ) {
  .top-bar{
    display:none;
  }
}

@media ( min-width:768px ) {
  .mobile-top-bar{
    display:none;
  }
}

전에 배웠던 media 활용

767 이하부터 '탑바'가 안보이고

789 이상부터'모바일 탑바'가 안 보인다.

---

반응형 탑바 만들때
공통된 것 주의
html class 잘 보기