[jQuery] 클릭하면 사라지는 더보기 버튼

안녕하세요. 플입니다.

오늘은 더보기 버튼을 클릭하면 사라지게 해 보겠습니다.

 

 

---

 1.  .click() 메서드 활용

먼저 클릭하면 사라지게 만들 것이니까

click() 메서드를 사용합니다.

 

$(".sub2 .btn").click(function(){
      
       
       
   }); 

""(따옴표) 안에 있는 것은 더보기 버튼의 클래스명입니다.

 

클릭을 했을 때 일어날 동작을 적어주어야 하니까

click() 메서드 괄호 안에 함수를 만들어줍니다.

 

함수는 function(){  }을 적어서 중괄호 안에 원하는 동작을 적어줍니다.

 

쉽게 말해 click을 했을 때 일어나는 일을 적을 주머니라고 생각해주세요.

---

 2.  .fadeOut() 메서드 활용

더보기 버튼이 없어졌습니다.

숨기는 것은 fadeOut() 메서드를 이용해 할 수 있습니다.

 

$(".sub2 .btn").click(function(){
      
       $(".btn").fadeOut();
       
   }); 
    

이렇게 아까 열어둔 함수 중괄호 안쪽에 fadeOut() 메서드를 적어줍니다.

가려지는 것은 더보기 버튼이니 ""(따옴표) 안쪽에서는 더보기 클래스명을 적어줍니다.

 

클릭하면 더보기 버튼이 사라지게 만들기 완성입니다.

 

 

---

그럼 이만.

총총.