page. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]

32일차

1. 아코디언 → 양옆에 나오게 하기(next, prev 실무 많이 씀)

• 아코디언 예제에서 클릭 했을 때 양 옆에 색이 들어오게 하는 예제이다.
• 실무에서 많이 쓰이는 next와 prev를 사용하여 선택하는 능력이 필요하다.
• 사용코드
  • next
  • prev

$('.box-1 > *').click(function() {
  let $this = $(this);
  
  $this.removeClass('active');
  $this.prev().addClass('active');   //디스 이전거 선택
  $this.next().addClass('active');    //디스 다음거 선택
});

2. 아코디언 → 마우스 가져다 놓으면 나오게 하기

a. 사용코드

• mouseenter
• mouseleave

b. 내용

• 아코디언 예제에서 마우스 클릭이 아닌 마우스를 가져다 놓으면 효과를 발동시키는 예제이다
• 약간 CSS의 호버와 느낌이 비슷하다.
• 아래 코드에서는 mouseenter 만 썼지만 mouseleave 를 사용할 수도 있다.

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